Segin Template

Discussion in 'General Chat' started by popey87, Jan 20, 2013.

  1. popey87

    popey87 Member

    Hey guys, I would really like to change some colors of the Segin Template, please tell me how I can do this, its a little more complicated than others I have seen.

    Main menu color and hover color,
    Main content text and link text,
    and also the main page content background.

    Thank you for any help.
  2. Gleb_S.

    Gleb_S. Subrion Designer Staff Member

    Hello!

    Here are steps how to do this:
    1. I've attached blank Stylesheet, please download, unpack and place it here:
    HTML:
    YOU_WEBSITE_ROOT/templates/segin/css/
    2. Open up layout.tpl and find line 24. Right after it place this code:
    HTML:
    <link href="{$smarty.const.IA_CLEAR_URL}templates/{$config.tmpl}/css/user-style.css" rel="stylesheet">
    3. Now you can edit user-style.css according to your needs. I've placed some general code there and some comments.

    Please let me know if anything goes wrong.

    Attached Files:

  3. popey87

    popey87 Member

    Thank you very much for doing that, just need also "active menu color" and "active sidebar menu color""

    Cheers.
  4. popey87

    popey87 Member

    Also if you please have a look at psgamers.net the main meny, how can I remove the white around the red?
  5. Gleb_S.

    Gleb_S. Subrion Designer Staff Member

    I've updated user-style.css. Please download it again and overwrite previous file.

    Attached Files:

  6. popey87

    popey87 Member

    Ok that's awesome thank you, now how do I solve active links, they are still blue?
  7. Gleb_S.

    Gleb_S. Subrion Designer Staff Member

    Please download attached file. I've added comments to stylesheet, so you will quickly navigate in the file.

    Attached Files:

    SnapDirectory likes this.
  8. popey87

    popey87 Member

    Thank you very much for your help so far I am almost satisfied with the colors I need to change, theres one thing still buging me I have attached an image of the main menu, around the menu links theres a white glow how can i change this color it would normally matter but because I have gone for a dark background it needs to change. Cheers. Nick. psgamers.net

    [​IMG]
    Last edited: Jan 21, 2013
  9. Vasily_B.

    Vasily_B. Project Manager

    Hi Nick,

    Let me teach you how to take fish, rather than feed you with it.

    I highly recommend to use some development tools in Chrome or FireBug. You can inspect the element and see all the styles for this element on the page. You can see these styles:
    Code (Text):
    .navbar .nav > li > a {
    float: none;
    padding: 40px 15px 40px;
    color: #666;
    text-decoration: none;
    text-shadow: 0 1px 0 #fff;
    }
    if you disable text-shadow your glow will disappear. Let us know if you need any assistance.
  10. popey87

    popey87 Member

    Sorry Vasily im still learning and I have never seen a css file like the ones in this template, but thank you.
  11. Vasily_B.

    Vasily_B. Project Manager

    No problem, please ask. Just want to help ;)

    There is a nice inspection tool in both Chrome and Firefox. They allow to see classes for the elements, you simply mouse over page elements and see the css that's related to this class.

    Later you can simply add own selector classes in the new css file added by Gleb and that will work!
  12. popey87

    popey87 Member

    Awesome I put that code in the user-style.css and changed the codes works great thank you guys for your time and support.
  13. popey87

    popey87 Member

    Anyone know how to change the colors of the buttons "add article" "rss" "read more" I tryed looking at the inspect element thing I couldnt figure it out.

    Edit:

    I didnt realize how powerful that inspect element is, I've figured out what I asked above and more.
    Last edited: Jan 21, 2013
  14. Vasily_B.

    Vasily_B. Project Manager

    Hehe, that's great! I'm glad to advise!

    Yes, it allows to see any element on the page and css classes that are used for it. It simplifies a lot of things. Just follow Glebs' advice, don't edit minified version - add your styles in user classes and it will work this way
  15. Greg

    Greg Super Moderator

    Slow but sure I'm getting the hang of this. Kinda simple once you get the hang of it.
  16. Vasily_B.

    Vasily_B. Project Manager

    Sure, it's very easy to edit the template once you understand how it works. And of course don't forget to use the the default bootstrap stylesheets:
    Bootstrap

    It's a base for our templates for both esyndicat & subrion scripts.

Share This Page