How to Customize a WordPress Theme


Results 1 to 9 of 9

Thread: Is this the right way to add CSS code?

  1. #1
    Join Date
    Jan 2014
    Posts
    6

    Default Is this the right way to add CSS code?

    Hello!

    I'm customizing the current wordpress theme I have (Genesis Lifestyle). I really love the way you have customized this theme for your hair website. I want primary navigation of website look similar to that in napturallycurly website (I hope you don't mind me saying this. I really love that)

    The problem is that, there is some division element called wrap which is leaving certain margin. So the navigation display blocks are not completely covering the top area (leaving whitespace at both the ends)

    Although I have solved this problem, I'm not sure whether this is a right way to do that.

    I got rid of left margin but it is not working for the whitespace on the right side. Help me!

    Here is the CSS code:

    #wrap {
    background-color: #fff;
    overflow: hidden;
    padding: 0 0 20px;
    margin-left: -20px;
    margin-right: -20px;
    width: 960px;
    -moz-box-shadow: 0 1px 2px #999;
    -webkit-box-shadow: 0 1px 2px #FFF;
    }

  2. #2
    Join Date
    Apr 2007
    Posts
    15,307

    Default

    That is why I stopped using Lifestyle. When 3.0 came out, there was too much space in the header and I couldn't for the life of me fix it so I switched to Magazine Pro.

    In this case, it's OK to post your URL. I think it makes it easier to see what's going on.

    Did you add the negative margins? Is that the part of the CSS code you changed to fix the problem? I always try to avoid using those if I can because different browsers handle them differently. Check your site in browsershots.org to make sure it looks OK in other browsers.

  3. #3
    Join Date
    Jan 2014
    Posts
    6

    Default

    Hello Lisa,

    The website is not yet live. I'm designing it using InstantWp.

    Yeah, that's the part of CSS code I have changed to fix the issue. I am afraid of using negative margins too. That is why I wanted to know if there is any other way to fix it.

    But I've solved the problem now. I figured out that it wasn't the division that was leaving margin on the right side. I actually changed the CSS for the nav division (which controls the back color, font and other attributes of primary navigation menu)

    Its width was set to some default value which wasn't enough to cover the width.

    Here is the code I have added and it worked!

    #nav
    {
    clear: both;
    font-family: Century Gothic;
    width: auto;
    overflow: hidden;
    background-color: #A7A7A7;
    text-transform: uppercase;
    }


    Thank you for the reply!


  4. #4
    Join Date
    Dec 2007
    Location
    Alexandria, MN USA
    Posts
    6,569

    Default

    Thanks for posting your solution. Often we never know how people fix thIings when they just say "problem solved." I think everyone appreciates it when you take time to share this information. Very few problems are so isolated that a lot of other folks won't encounter the same type of issue at some point.

    When working with html, margins can often be challenging, a frequent and infamous problem often associated with different versions of IE but a potential issue at any time. I have seen many cases of layout being messed up because a containing tag was not wide enough to hold what was placed in it because there was no space allowed for margins in addition to the space needed for the inclosed tags.
    Last edited by James; 01-26-2014 at 10:42 PM.
    Good Success!

    Website: Success With Money
    "People will forget what you said, people will forget what you did, but people will never forget how you made them feel." —Maya Angelou

  5. #5
    Join Date
    Apr 2007
    Posts
    15,307

    Default

    Oh I missed your reply. Glad it's solved!

    James you're right, margins always drive me nuts.

  6. #6
    Join Date
    Jul 2009
    Location
    Rochester, NY
    Posts
    1,725

    Default

    Remember...

    You can always modify a common element such as .wrap if you first specify the parent container. Use your browsers "Inspect Element" to determine the exact hierarchy of the element.

    For example, if the .wrap class is used inside #header, #topnav, #body, and #footer and you want to remove the bottom padding in the #topnav only, you could add this to your CSS (after the .wrap element):
    Code:
    #topnav.wrap {padding: 0;}
    That would change the .wrap class but only inside the #topnav ID...

    I also noticed that in your example, #wrap is an "ID". Remember, ID's can only be used once in a document, classes can be used multiple times. Since a "wrap" is used multiple times in a theme, it should be a "Class" not an "ID' (.wrap, not #wrap)
    Scott, K2ZS
    My Amateur Radio Page about antenna restrictions and indoor amateur radio antennas
    TGCDesign Web Solutions - specializing in CodeIgniter and ExpressionEngine development
    Home automation ideas for todays smart home

  7. #7
    Join Date
    Jan 2014
    Posts
    6

    Default

    Thank you guys. :-)

    K2Zs, I can't yet notice many such small yet important aspects that affect my code afterwards. Thank you so much!

    I've still lot more to learn in CSS (whenever I get a break from college work ) and I look forward to improve my skills with the help of you all

    Best,
    Aditya

  8. #8
    Join Date
    Sep 2012
    Location
    Ilkeston, Derbyshire, England
    Posts
    1,874

    Default

    Quote Originally Posted by k2zs View Post
    Remember...

    You can always modify a common element such as .wrap if you first specify the parent container. Use your browsers "Inspect Element" to determine the exact hierarchy of the element.

    For example, if the .wrap class is used inside #header, #topnav, #body, and #footer and you want to remove the bottom padding in the #topnav only, you could add this to your CSS (after the .wrap element):
    Code:
    #topnav.wrap {padding: 0;}
    That would change the .wrap class but only inside the #topnav ID...
    I have been fiddling with the Magazine Pro theme tonight and I did encounter some issues with the .wrap class, I'm glad you mentioned this. You have pointed out an obvious solution I overlooked. I should have know this all along.. thanks!

  9. #9
    Join Date
    Jul 2009
    Location
    Rochester, NY
    Posts
    1,725

    Default

    Glad to hear that Darren, that is what we are all here for isn't it; to help one another...
    Scott, K2ZS
    My Amateur Radio Page about antenna restrictions and indoor amateur radio antennas
    TGCDesign Web Solutions - specializing in CodeIgniter and ExpressionEngine development
    Home automation ideas for todays smart home

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •