Header CSS Customization

  • Author
    Posts
  • #1840524

    vlogazul
    Member

    Hello, I am currently using the forever theme and I would like to know if i can get a snippet to make my header image be 100% width just like my menu bar and the slider! Thanks

    The blog I need help with is vlogazul.com.

    #1840729

    If we stretch the image it will lose quality since we will be asking the browser to do the enlarging

    Since the original header image size is set in the theme files, let’s put the image in through CSS instead.

    Add the following CSS, upload a new 960px wide by 91px tall image to your media library, get the URL of that image and replace URL_OF_IMAGE between the quote marks with the URL of your new image. The second rule below hides the existing image.

    #masthead {
        background: url("URL_OF_IMAGE") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
    }
    #masthead img {
        visibility: hidden;
    }
    #1840767

    vlogazul
    Member

    I see thank you very much!

    Is there a snippet for the following..

    If you check the last widget on my side bar, you will see a gray line crossing the Ăšltimas Noticias widget title. Is there a snippet to make every widget title on my sidebar have that gray line crossing the tittle name?

    #1840776

    Hi there, I’m not seeing that widget in your sidebar. Did you remove it?

    #1840777

    vlogazul
    Member

    Hi there! I accidentally removed it but now its there and i hope there’s a snippet for it. thanks

    #1840778

    vlogazul
    Member

    The widget should be at the bottom of the sidebar by now, hope there’s a snippet to it! Thanks

    #1840779

    Given they have created unique styling for the recent posts widget, you will have to create individual rules for each widget type you are using where you have a title. This would cover text widgets. The same set of declarations should work for other widget types, but you would need to use the correct selectors.

    .widget_text .widget-title {
        background: none repeat scroll 0 0 #EFEFEF;
        line-height: 10px;
        margin-bottom: 0.5em !important;
        margin-left: 0 !important;
        margin-top: 6px !important;
        padding-left: 0 !important;
    }
    #1840780

    vlogazul
    Member

    It worked just the way I wanted it! Thank you very much..

    #1840781

    You are welcome.

    #1840782

    vlogazul
    Member

    Hello once again!
    I just noticed something with the code you provided me with…

    The snippet you gave me works perfectly, the only thing that I noticed is that before adding the code the “Redes Sociales” widget on the footer section was aligned with the widgets from the left and right of the footer, after I added the code as you can see that same “Redes Sociales” widget looks a little bit to the top and is not aligned with the other two widgets. is there a snippet to align that middle widget so that al those three widgets from the footer look aligned just the way it was before?

    #1840785

    Let’s target only the sidebar widget area by changing the selector used in that rule.

    #secondary .widget_text .widget-title

    #1840787

    vlogazul
    Member

    it works perfectly.. Thanks

    I have a few snippet requests, i would appreciate if you can help me!

    There’s a gray horizontal line between the featured image posts and the widget sidebar, is there a snippet to make that line shorter? so that it can align with the last gray line on the 3rd featured post.

    The 3 widgets on the footer have a line below the tittle text, is there a snippet to make that line be gray just like the line on the featured posts? and also is there a snippet to decrease the space between from the tittle text and the below line from the footer widgets? thanks

    #1840788

    There’s a gray horizontal line between the featured image posts and the widget sidebar, is there a snippet to make that line shorter? so that it can align with the last gray line on the 3rd featured post.

    The grey bar extends to the bottom of the margin setting on the last widget. Because post and post title lengths can vary, there is no set length for the posts area. Also, additions or changes to the widgets in the sidebar can vary the length of the sidebar. We could remove the bottom margin on the last widget, or we could adjust the bottom margin for all widgets, which would nearly fix it for now, but a new post may misalign it again.

    The 3 widgets on the footer have a line below the tittle text, is there a snippet to make that line be gray just like the line on the featured posts? and also is there a snippet to decrease the space between from the tittle text and the below line from the footer widgets? thanks

    There is bottom padding (above line) and margin (below line) on the footer widget titles. You can adjust those for your desired look in the code below.

    On the border line below the titles in the footer widgets, I pulled the styling from the border line in the titles, but left the color as it was since the color of the border on the posts is the same as the background color for the footer widget area (wouldn’t show up).

    #supplementary .widget-title {
        margin-bottom: 0.5em;
        padding-bottom: 0.5em;
        border-bottom: 4px solid #CCCCCC;
    }
    #1840789

    vlogazul
    Member

    Thank you very much..
    I would like one more snippet request if possible!

    If you go to the main page on the website, on the right hand side bottom corner there’s a button that says “Seguir” if you click on it the email subscription is going to appear. As you can see the tittle ” Seguir “Vlog Azul” that text is italic, is there a snippet to make that text be regular and not italic? And would there also be a snippet to make that tittle text a text of my own? Thanks

    #1840790

    Add this to change that text to normal instead of italic.

    #bitsubscribe label {
        font-style: normal;
    }
    #1840792

    vlogazul
    Member

    it worked perfect.. Once you click on the button, is there a way to change the Seguir “Vlog Azul” tittle text, to a text of my own?

    #1840793

    Hi, yes we can do that. Delete the last thing I had given you and replace with the following and then you can edit the “My Text Here” bit.

    #bitsubscribe label {
        font-style: normal;
        visibility: hidden;
    }
    #bitsubscribe label:before {
        content: "My Text Here";
        visibility: visible;
    }
    #1840801

    vlogazul
    Member

    it works perfectly.. Thank you very much!

    #1840803

    You are welcome.

The topic ‘Header CSS Customization’ is closed to new replies.