Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #511174

    Good afternoon. I wonder if you may be able to help me with a couple of things please.

    I am using Enfold for yet another client (using Enfold Child theme) and am having a couple of problems whereby the code within quick CSS does not seem to reflect on the website.

    Firstly, I have set the header on the homepage to be Transparent & Glassy and have included the following code in quick CSS

    #top .av_header_glassy.av_header_transparency .header_bg {
    background-color: #86817e
    opacity: 0.7 !important;
    }

    However the theme does not seem to be reflecting the colour or opacity. I used the same code on another website and that worked ok.

    Secondly, I am trying to increase the line height within text boxes and have added the following code, however, the only thing it increases line height in is the blog feed excerpt not within text boxes.

    body { font-size: 14px; line-height: 200%; !important;}

    I hope it all makes sense. The website it relates is below.

    #511187

    perhaps it is because you lost a semicolon:

    #top .av_header_glassy.av_header_transparency .header_bg {
    background-color: #86817e;
    opacity: 0.7 !important;
    }

    on question 2 – maybe there is a more specific css that overrides your css.
    and here is an extra semicolon

    body { font-size: 14px; line-height: 200% !important;}

    • This reply was modified 9 years, 1 month ago by Guenni007.
    #511202

    You are absolutely right Guenni007. Thank you for your quick response. I feel so silly – clearly semicolons are not my friends today :)

    Changing the quick CSS for the header worked beautifully.

    Unfortunately, the line height is still not being reflected on the website (although the size text does get updated when I change it). I take your point about there being a more specific css that overrides my quick CSS – but I have no idea how to find it. I had a look at the Enfold Child theme style sheet and couldn’t find anything there.

    Your help is greatly appreciated.

    Cheers
    Ivana

    #511238

    Many browsers have webdeveloper tools implemented today. In former times there only was the firebug plugin for firefox.
    I use it today allthough the others are quiet good tools too. (btw. on Safari the webtools has to be activated first)

    There you go on with your mouse arrow and point the text you want to change and press the context button. I work here in Germany so i only know the german phrase for it ” Element mit Firebug untersuchen” (maybe inspect the element with firebug)

    A new window is opend with info about the html and css for that element – and the clou is that you can change the css on the right side without touching your source code on the fly.

    hovering the elements on the left side the concerning elements are highlighted on your site.
    you can see this on the second image hovering the p tag highligts the p block on the site.


    by this you can find the right decision what to change and you can try it ( doubleclick on a css rule at the right you can change the rules or context-menu adding some new css rules

    • This reply was modified 9 years, 1 month ago by Guenni007.
    #511244

    i dont see your site because i’m a participant as well. Otherwise i would help you.
    By – and good luck

    #511441

    Hi!

    Please try using following code

    .avia_textblock {
        line-height: 200%;
    }

    Thanks for your help @guenni007 :)

    Regards,
    Yigit

    #512610

    I really appreciate your help Guenni007 – and I’ll see if I can find some of those web developer tools.

    Yigit, as always your assistant is appreciated and the code worked perfectly!

    Many many thanks to you both

    Ivana

    #512678

    Hi,

    Glad you got it fixed :-)

    Cheers!
    Rikard

Viewing 8 posts - 1 through 8 (of 8 total)
  • The topic ‘Quick CSS questions’ is closed to new replies.