Footer: Action bar (text-align); Social Icons: increase size.

website address: www.women-in-balance.at

In the action bar at the footer I have attempted to changed the action heading to align left instead of center.
The code here does not work:

 Footer .footer_action .one {
text-align: left;
padding-left: 0;
}


Also trying to change the size of the social icons in the footer area.
In Chrome under "inspect element" I was able to adjust the size but this no longer worked when I added the code to the style sheet:

em, i {
    font-size: 150%;
}

Footer .footer_copy .social li a {
   font-size: 21px;
}

Is it possible to add the social icons in the header as well?

Thanks for the help!
: )

Comments

  • Hi,

    1) What exactly you want to align left? Footer action is already aligned to left so we don't get this question.

    2) To change social icons in footer, please check the following topic http://forum.muffingroup.com/betheme/discussion/7751/increase-the-size-of-the-icons-of-the-social-media where this was explained.

    3) To display social icons in header, you must activate Action Bar under Theme options > Menu & Action Bar > Action Bar section.
  • edited April 2016

    1) I want to align the text line/content left to align with the other content
    again the code I insert for that is not working.
    Is there some glitch in my website?

    2):#Action_bar .social li a { font-size: 20px !important; }
    #Footer .footer_copy .social li a { font-size: 20px !important; }

    Thanks! I had already previously pasted this code in the css (with and without the "#" tag – and without the "!important" ) 

    it did not work. which is why I posted the query.

    It still does not work. with the # and the !important


    Actually none of the code I pasted in recently has worked.

    do I need to use the "#"? all my previous code is devoid of it and it has worked.

    also do I need to add the "!important" as well?


    3) Thanks! figured that out.....


  • 1) Would be great if you can show us on screenshot what you want to move exactly because as we can see, there is nothing what can be moved more tho the left. It's already maximum on the left side.

    2) Where did you pasted this code? Because we checked your site and did not found it anywhere.
  • ok for some reason it works now. 
    I did add the "!important" to the code.
    WHEN please do I need to add it and when not?
    also do I add the "#" all the time?

    the code I had previously inserted all worked without both.
    Here is all my code so far. As you can see, some of it is with and some without.
    Please inform me if I should add the "#" and !important" to all.
    Thank you!

    /*
    Theme Name: Betheme
    Author: Muffin group
    Description: The biggest WordPress Theme ever
    License: Themeforest Split Licence
    License URI: -
    Version: 12.1

    All css files are placed in /css/ folder
    */

    h1, .text-logo #logo {
        font-size: 30px !important;
    }

    a.mfn-link {
    font-size: 18px;
    }

    /*FOOTER*/
    Footer .footer_action .one {
    text-align: left;
    }

    Footer h4 {
    margin-bottom: 4px;
    }

    Footer a:hover {
    text-decoration: none;
    }

    #Footer .footer_action .one {
    text-align: left !important;
    padding-left: 0;
    }

    /*#Action_bar .social li a { font-size: 25px !important; }*/

    #Footer .footer_copy .social li a {
    font-size: 25px !important; 
    }


    .timeline .date_label, .timeline_items li h3 span {
        font-size: 18px;
    }
  • The code is under: Betheme:Stylesheet (style.css)

  • !import is necessary when you are overwriting existing style. So basically, it should be used each time when you want to overwrite styles. Also, we suggest to keep styles in Theme options > Custom CSS & JS > Custom CSS section because the content from that section is more safe as it's stored in the database.
  • Aha! now I see that one can also place code under:
    Betheme options: Custom CSS & JS
    Where is the best place to put my code?
    Thanks!

  • thanks for your response.

    I understand:
    "!important" should be used everywhere in my custom css as all of it overwrites exixting styles.
    Is this correct?

    It would be good to add this information in the documentation.

    enjoy your weekend if you  have one

  • The best place is Theme options > Custom CSS & JS > Custom CSS section like we wrote above.
Sign In or Register to comment.