0
Welcome Guest! Login
0 items Join Now

SOLVED Custom CSS won't override correctly (Leviathan)

Last Post
Search Topic

  • SOLVED Custom CSS won't override correctly (Leviathan)

    Posted 10 years 8 months ago
    • Hello, I've tried everything but my custom CSS isn't overriding correctly for Leviathan

      The CSS itself is working but it doesnt change the menu to what I want. I want to place the text more to the left at 10px but it doesn't work.

      Here's my custom CSS

      The first code is working by the way
      body {
    background-image: url(); background-position:center center;
  background-attachment:fixed; background-repeat:repeat;float:center;">

.gf-menu .dropdown ul li .item{border:1px solid transparent;padding:8px 10px;}

      I also want to get rid of the white symbols in the child menu's.

      I simply tried to change the size of the symbol to zero, so it wouldn't be seen anymore

      I think it's this line
      .gf-menu .dropdown .grouped.parent > .item:after {
    font-family: FontAwesome;
    content: "";
    font-size: 0px;
}

      Thank you very much for your help.
    • Last Edit: 9 years 4 months ago by Kat05.
    #1128221
    • DanG's Avatar
    • DanG
    • Preeminent Rocketeer
    • Posts: 36750
    • Thanks: 3229
    • Custom work done

    Re: SOLVED Custom CSS won't override correctly (Leviathan)

    Posted 10 years 8 months ago
    • If this is a site that is online could you please supply a link in the Public or SECURE part of your reply so we can better diagnose the issue?
      It makes our suggestions more accurate if we see the actual coding of your site.
    #1128223

  • Re: SOLVED Custom CSS won't override correctly (Leviathan)

    Posted 10 years 8 months ago
    • Yes sure. Here it is

      Part of the message is hidden for the guests. Please log in or register to see it.
    #1128224
    • DanG's Avatar
    • DanG
    • Preeminent Rocketeer
    • Posts: 36750
    • Thanks: 3229
    • Custom work done

    Re: SOLVED Custom CSS won't override correctly (Leviathan)

    Posted 10 years 8 months ago
    • Diedrich Schmidt wrote:
      Hello, I've tried everything but my custom CSS isn't overriding correctly for Leviathan

      The CSS itself is working but it doesnt change the menu to what I want. I want to place the text more to the left at 10px but it doesn't work.

      Here's my custom CSS

      The first code is working by the way
      body {
    background-image: url(../bg2.png); background-position:center center;
  background-attachment:fixed; background-repeat:repeat;float:center;">

.gf-menu .dropdown ul li .item{border:1px solid transparent;padding:8px 10px;}

      No it's NOT. By ending with a ">" and not a proper closing tag of "}" all code after this line is ignored as the browser thinks it's commented code. This is why in your code output the second line is green which are forum editor marks as commented code.

      Once the tag is corrected we move on to line 2. It still wont run because of this element identification:
      ".gf-menu .dropdown ul li .item" by placing a space between "li" and the class ".item" this denotes to the browser that the class ".item" is a sub of the parent element "li"

      Not the case as ".item" is a modifier for "li" so the proper way to write it is "li.item", no space.
      However this won't work either here as there is NO "li.item". CSS is literal so that "li.item130" is TOTALLY different than "li.item".

      Try this instead, in your rt_templateName-custom.css file add this:
      .gf-menu .dropdown ul li {
    border:1px solid transparent;padding:8px 10px;
    }
    • Last Edit: 10 years 8 months ago by DanG.
    #1128228

  • Re: SOLVED Custom CSS won't override correctly (Leviathan)

    Posted 10 years 8 months ago
    • Okay, I see what you mean. So I have to put a "}" at the end of the first line right?

      It still does nothing.

      That is the code I am now using


      body {
    background-image: url(../bg2.png); background-position:center center;
  background-attachment:fixed; background-repeat:repeat;float:center;"}

        .gf-menu .dropdown ul li {
    border:1px solid transparent;padding:8px 10px;
    }

.gf-menu .dropdown .grouped.parent > .item:after {
    font-family: FontAwesome;
    content: "x";
    font-size: 0px;
}

      The problem here is, that the menu buttons aren't long enough to display the whole text in there. I must admit, that I am still new to all that code and I mainly do things by try and error.

      Edit: It seems like the first code isn't the right one for the menu buttons. I would like to make them a bit wider or put the text more to the left. I got the second code for the symbol working now though.

      When I change this in firebug it does exactly what I want, but when I change it in the custom css it only puts the whole menu a few pixels more to the bottom


      }
.gf-menu .dropdown ul li .item {
    border: 1px solid transparent;
    padding: 8px 22px;
}

      I am changing this to
      }
.gf-menu .dropdown ul li .item {
    border: 1px solid transparent;
    padding: 8px 10px;
}

      I hope, you know what I mean
    • Last Edit: 10 years 8 months ago by Diedrich Schmidt.
    #1128232

  • Re: SOLVED Custom CSS won't override correctly (Leviathan)

    Posted 10 years 8 months ago
    • I got it to work, if someone has the same problem, here is the code, I am using right now.


      body {
    background-image: url(../bg2.png); background-position:center center;
  background-attachment:fixed; background-repeat:repeat;float:center;"

    }.gf-menu .dropdown ul li .item{border:1px solid transparent;padding:8px 10px;}

.gf-menu .dropdown .grouped.parent > .item:after {
    font-family: FontAwesome;
    content: "x";
    font-size: 0px;
}

      That puts the text more to the left in the menu buttons and deletes the white symbols. Thank you for your help
    #1128432
    • DanG's Avatar
    • DanG
    • Preeminent Rocketeer
    • Posts: 36750
    • Thanks: 3229
    • Custom work done

    Re: SOLVED Custom CSS won't override correctly (Leviathan)

    Posted 10 years 8 months ago
    • You can control the width of the columns for your menu items in the menu parameters -> DropDown Options -> Column Width.

      To mark this issue as Solved, please change to a Checkmark and edit the Topic Title in your FIRST post of the Topic
      This image is hidden for guests.
      Please log in or register to see it.

      Thanks.
    #1128477

  • Re: SOLVED Custom CSS won't override correctly (Leviathan)

    Posted 10 years 8 months ago
    • Yes, thank you very much. I still don't know why it works, because the second and third line is still green marked here. I found that option for the menu myself before but then I already changed the css, so it fits perfect for me now.

      Thank you
    #1128481

Time to create page: 0.071 seconds