How do I edit?

  • Stoly
    Stoly
    Senior Member
     
    138 points

    How do I edit the small icons to the right of the panel box, for each section? Say, upload my own?

    Is it possible to change the colour of the text to say a dark bold and large font blue?

    Can I make the yellow-orangey button background a different colour, if so what css could I use and also the middle section bars of the column another color?

    Thanks so so much in advance!

    Attachments:
    You must be logged in to view attached files.

    JamesD
    JamesD
    Elite Member
     
    507 points

    @Stoly,

    How do I edit the small icons to the right of the panel box, for each section? Say, upload my own?

    You would need to edit core files just to change the icons to something that is already available in the theme. Adding your own would be even more in-depth.

    Is it possible to change the colour of the text to say a dark bold and large font blue?

    Yes. You can add the following to your custom stylesheet/styles or Go to “Theme Setup > General Setup > Custom CSS/Javascript > Custom CSS” and add/save it there.

    .page-template-tpl-account .core_widgets_categories_list ul li > a {
        color: #34346d;
        font-weight: bold;
    }
    

    Just replace the css values to what you need.

    Can I make the yellow-orangey button background a different colour, if so what css could I use and also the middle section bars of the column another color?

    Yes. You could do something similar for the button with:

    .page-template-tpl-account .core_widgets_categories_list ul li .btn-warning {
        color: #fff;
        background-color: #34346d;
        border-color: #34346d;
    }

    Again, just replace the css values to what you need.

    Note: These styles would probably be the quickest/easiest way for you to accomplish these,


    JamesD
    JamesD
    Elite Member
     
    507 points

    @Stoly

    Note: Another option of adding the CSS is going to: “Design Setup > Color Tool > Additional CSS” and enter it then click the save/publish button. I would use one of the other options first, but this should work the same as well.

    This reply was awarded the best answer by the topic poster.

    Stoly
    Stoly
    Senior Member
     
    138 points

    Ok, thankyou so much!

    With the icons, I was wondering, can I get a copy of them, change their colour at least and just upload or update them in the theme? Or are they using font awesome btw?

    Again thanks.


    JamesD
    JamesD
    Elite Member
     
    507 points

    With the icons, I was wondering, can I get a copy of them, change their colour at least and just upload or update them in the theme? Or are they using font awesome btw?

    I believe it’s a condensed version of glypficons.

    You can change the color, at least, with CSS. Something like this should work:

    .glyphicon {
        color:#34346d;
    }

    Place it along with the other CSS in the previous response and replace the CSS value to what you want.

    Edited: To reflect glyphicons, not font-awesome.


    Stoly
    Stoly
    Senior Member
     
    138 points

    Also,

    What is the code for changing the middle lines for each section, from a light grey to a another colour?

    I have attached an image.

    Attachments:
    You must be logged in to view attached files.

    JamesD
    JamesD
    Elite Member
     
    507 points

    What is the code for changing the middle lines for each section, from a light grey to a another colour?

    .page-template-tpl-account .core_widgets_categories_list ul li {
        background-color: #FFF;
    }

    You know the drill. :-)


    Stoly
    Stoly
    Senior Member
     
    138 points

    While we are here with the top menu text, how do I Center the heading?

    Do i go to language setup area, then put a <center> </center> and this will center the text?


    JamesD
    JamesD
    Elite Member
     
    507 points

    While we are here with the top menu text, how do I Center the heading?

    Please provide a url.

    Do i go to language setup area, then put a <center> </center> and this will center the text?

    No clue, I doubt it. Either way, I wouldn’t recommend it.


    Stoly
    Stoly
    Senior Member
     
    138 points

    .page-template-tpl-account .core_widgets_categories_list ul li {
    background-color: #FFF;
    }

    I just tried it, this code changes the background color, only the middle lines running between each section I would like to be changed form default to grey.

    Thankyou JamesD.


    JamesD
    JamesD
    Elite Member
     
    507 points

    Thought you were referring to the middle line (menu items) background, but you’re referring to the border, right?
    This should work:

    .page-template-tpl-account .core_widgets_categories_list .panel>.list-group .list-group-item, .panel>.panel-collapse>.list-group .list-group-item {
        border-color: #CC0000;
    }
    

    You need to change the CSS value.


    Stoly
    Stoly
    Senior Member
     
    138 points

    Yes, awesome!

    Thanks JamesD 😉


    JamesD
    JamesD
    Elite Member
     
    507 points

    You’re welcome, thanks for updating.


    Josh
    Josh
    Super Guru
     
    13,836 points

    Hello Stoly,
    You can use css to change the icons too.For example to change the first icon you could use something like

    .glyphicon-dashboard::before {
    content: “\E021”;
    }

    Go to http://glyphicons.com/ get the icon you want to use unicode by clicking on the icon then replace E021 in my code with your icon unicode


    JamesD
    JamesD
    Elite Member
     
    507 points

    @Josh

    You’re a brave soul Mr Josh. 😉


Viewing 15 posts - 1 through 15 (of 15 total)

You must be logged in to reply to this topic.