WordPress.org

Ready to get started?Download WordPress

Forums

Decreasing background size, increasing container size, color (12 posts)

  1. hollygo
    Member
    Posted 2 years ago #

    I'm having issues trying to find in forums how to decrease the background size in css. I don't really have experience w/ WP but I'm a fast learner, I've found posts but can't seem to find the solutions listed in my css. I'm using theme FUDO 3.0 and this is the site, http://thegritstree.org/?page_id=10. The person I'm doing the site for wants the background image of gingham to be more like a border on the page, only 3-4 lines of the gingham.

    I also can't figure out how to change the header and nav menu colors. I've edited colors in css but nothing on the site changes! I don't know what's changing where but I'm not seeing it :-/

  2. WPyogi
    Volunteer Moderator
    Posted 2 years ago #

    Header code is line 429 in style.css:

    #header-text {
        background: none repeat scroll 0 0 #DCDCDC;
        padding: 30px 0;
    }

    The menu styles are from lines 364 to 425 in style.css.

    Try using Firebug to identify exactly what CSS code you need to change.

    Because that theme has a flexible width (i.e. how much gingham shows depends on the size of the browser window), it is not at all simple to do what you want. You'll have to do some major redesign/coding to make a fixed border -- like adding another wrapper around the section -- with a fixed width for the gingham section...

  3. WPyogi
    Volunteer Moderator
    Posted 2 years ago #

    Also, be sure you are clearing your cache when editing CSS -- as the stylesheet often gets cached and changes you make are then not visible.

  4. hollygo
    Member
    Posted 2 years ago #

    Thanks, I figured out the color issue but I think the border thing will take some time. Do you know where, in this theme, the nav menu font size is? I've gone thru the css almost 10 times looking for "header" "menu" "access" etc and can't seem to find it.

  5. WPyogi
    Volunteer Moderator
    Posted 2 years ago #

    The menu styles are from lines 364 to 425 in style.css.

    Try using Firebug to identify exactly what CSS code you need to change.

  6. hollygo
    Member
    Posted 2 years ago #

    I have Firefox 12, do you know how I can install Firebug? When I click on the download for the compatible version (which is in the alpha phase) all these files come up, not a download button like the other versions. I tried installing the previous version but that didn't work.

  7. WPyogi
    Volunteer Moderator
    Posted 2 years ago #

    No, don't know about Firebug for FF 12 (I have 11.0 for Mac).

    But I looked again at the CSS code and the font size is just standard -- set at 100% on line 19 of style.css (with many other tags). If you want to change it, you can do it in this CSS on line 457 (oops my line numbers above were not quite right -- sorry about that):

    #mainmenu {
        background: none repeat scroll 0 0 #FFFFFF;
        border-bottom: 1px solid #CCCCCC;
        border-top: 1px solid #CCCCCC;
        float: left;
        z-index: 10000;
        font-size: ???%;
    }

    Add the font-size as I did at the bottom -- and use whatever % you want -- you can use more than 100% if you want the font to be larger than it is. Since the site is coded with font-sizes in %, it's best to keep that format -- and it works better for responsive sites.

  8. hollygo
    Member
    Posted 2 years ago #

    I was almost about ready to throw in the towel tonight but that worked! Thanks!

    I don't know if you'd know the answer to this (you seem to know a lot). I'm having issues... when I removed a rss button in the nav menu, it doesn't show up in ff but does in ie as red x.

  9. WPyogi
    Volunteer Moderator
    Posted 2 years ago #

    Glad it worked -- this kind of thing can be really frustrating I know. See if you can get Firebug installed and working -- it's really a great tool for CSS among other web stuff.

    I don't have IE, so I can't look at it in that, but there is some code in that place -- which is probably causing that red X. This is the code:

    <a href="http://thegritstree.org/feed"" rel="feed"><img src="http://thegritstree.org/wp-content/themes/fudo/" alt="" /></a>

    How did you remove the rss button? Maybe try deleting the above code in the html editor and see if that fixes it.

  10. hollygo
    Member
    Posted 2 years ago #

    I'm having trouble locating the code you specified in the html editor. I looked on each page in html and didn't see it, am I looking in the wrong spot?

    I removed the button by deleting parts of the code I thought were related to it in the header.php. Everything I delete in there now, that I think is related to this issue, ends up screwing up the header.

  11. WPyogi
    Volunteer Moderator
    Posted 2 years ago #

    I looked at it using Page Source (Command-U on a Mac) in Firefox -- doing that shows the code of the entire page and you should be able to use search to find it.

    That piece of code is right at the end of the menu "list" in the header section -- line 47 when I copy/paste the page code into a text editor.

  12. hollygo
    Member
    Posted 2 years ago #

    i figured out where the code was that you posted. it shows up as "your url feed" and not the name of the site (which is how i was trying to find it). makes sense now though.

    i have 2 font size questions for you. where is the font size located for the main content on the page? and this one is confusing (to me anyway); the heading title on each page changes font size based on how many letters are in the word, i want all those fonts to be the same size.

Topic Closed

This topic has been closed to new replies.

About this Topic