WordPress.org

Support

Support » Themes and Templates » CSS and Firefox issue

CSS and Firefox issue

  • Catriona78
    Member

    @catriona78

    Hi there,

    New to wordpress.org.

    Have installed wordpress theme F8 lite which i really like but i am trying to make even more minimalist.

    My issue is that I’ve been editing the CSS Style sheet for my custom menu. I’ve basically tried to get rid of all the background in the menu container but still leave the menu headings in gray with a red hover colour. So… in firefox the whole menu is blank except when I hover however the gray headings do show up in safari. I’ve cleared my cookies and cache and restarted but still not showing up.

    Also how can I get the header image in this theme not to show up on every post/page. I just want it on the home page.

    http://www.catrionamacinnes.com

    Thanks in advance!

Viewing 11 replies - 1 through 11 (of 11 total)
  • Nalin
    Member

    @nalin_duminda

    this is the css class you should edit

    .sf-menu ul a, .sf-menu ul a:visited {
        color: #FFFFFF;
    }
    
    nav.css (line 75)

    all you visited links turning to white

    Nalin
    Member

    @nalin_duminda

    about the header image

    use this code

    <?php
    if(is_home()){
       //put your header image here
    }
    ?>
    Catriona78
    Member

    @catriona78

    Sorry. I’m really not very clued up about all this. I can’t identify that line. Here is the code I have in the style sheet…

    .sf-menu ul {
    list-style:block;
    padding:0;
    margin:0 0 20px;
    background-color:#fff;
    font-size:1em;
    height:40px;
    }

    .sf-menu ul li {
    text-align:left;
    float:left;
    height:40px;
    margin:0;
    background:#fff;
    border-right:none;
    padding:0;
    }

    .sf-menu ul li a {
    display:block;
    width:100px;
    padding:7px 5px 22px 7px;
    color:#606060;
    font-size:12px;
    text-decoration:none;
    text-shadow:none;
    }

    #navcontainer>.sf-menu ul li a {
    width:auto;
    height:auto;
    height:8px;
    }

    .sf-menu ul li#active a {
    background:#000;
    color:#ccc;
    }

    .sf-menu ul li a:hover,.sf-menu ul li#active a:hover {
    color:#FF4040;
    background-color:#fff;
    }

    .sf-menu ul li.home {
    border-left:none;
    }

    .sf-menu ul li li {
    border:none;
    border-bottom:none;
    }

    Catriona78
    Member

    @catriona78

    I’m editing in the wordpress theme editor. Can and should I be doing it in my file manager in Cpanel? Sorry if I’m coming across like an idiot.

    Nalin
    Member

    @nalin_duminda

    hi Catriona,

    no you you are ding it correct. you should use theme editor. but its much esier if you can download the whole theme and edit it using web editor such as dreamweaver.

    and the css code you mentioned I’m not sure that you got the correct one.

    the actual one has 150 lines. i’ll tell you if you can wait 3 hrs i can help you… this is my skype id nalin_duminda… give me a buzz

    Catriona78
    Member

    @catriona78

    Hey,
    Thanks for that. I’ll download the theme and try and do the editing in dream weaver first before pasting the code back to the theme editor. I let you know how I get on and if I need more guidance. I don’t have skpe set up I’m afraid. I know, I’m living in the dark ages!

    Thanks again,
    Catriona

    Nalin
    Member

    @nalin_duminda

    Hi,

    ha ha ….. no just told bcoz it’s much faster than writing on this wall.

    actually your problem very easily can resolved… any way I’ll wait for your reply

    Nalin

    Catriona78
    Member

    @catriona78

    Hi. I know what code you mean now. Its nav.css code which I can locate in dream weaver, but its the style.css sheet that I’ve been editing within the theme.

    I can’t find an option to edit the nav.css code within the theme editor so dreamweaver it is.

    Once I edit it in dreamwaever, how do I then load it in to my blog?

    I’ve set up the website in dreamweaver and set it up ‘supporting files’ folder in applications.

    Nalin
    Member

    @nalin_duminda

    try upload the file using FTP method Filezilla is a free FTP client. firefox also have FTP plugin called fireftp…. use one of those….

    the file path i guess:

    publichtml/wp-content/theme/f8lite/css/

    Catriona78
    Member

    @catriona78

    Hey thanks, I fixed the problem by just pasting that nav.css in the style.css sheet which seemed to work. I can’t work out dreamweaver yet.

    Do you know if i’d be able to put my menu above my header image? If so how would i do such a thing.

    Will try removing header image from posts now and see how i get on.

    Nalin
    Member

    @nalin_duminda

    i guess your menu code located at header.php. try to find this div
    <div class="sf-menu clearfix">.

    what ever the code between this div move to below this div

    <div class="clearfix" id="masthead"></div>

    does it make any sense?

    <div class="clearfix" id="masthead"></div> : this is the div contain your we site tile “Catriona MacInnes”.

    your menu should comes under that div so cut and paste the whole code

    <div class="sf-menu clearfix">
    what ever the code here
    </div>

    let me know if you have any difficulties

Viewing 11 replies - 1 through 11 (of 11 total)
  • The topic ‘CSS and Firefox issue’ is closed to new replies.