Change Background Color for Sticky Topics in Elgance

Discussion in 'phpBB Support' started by omarrrio, Mar 18, 2015.

  1. omarrrio

    omarrrio New Member

    Hi, i hope you are doing Okay Arty, i would like to thank you for the perfect deign on Elegance, making phpbb worth the pain of it being an ugly piece of forum software, and would love it if you could help me out on this one, i am not sure if this is the right place, because i can't find a "read before posting" sticky nor do i have a problem with your modification/styles, all i want is to change the background color for my sticky topics in the topic list, i am weak when it comes to html/css/js, but i tried messing around with forumlist_body.html , but to no avail, as i can't find any reference to sticky topics nor any color proprety being mentioned, so i moved on to the css files, especially the colours.scss one, and i found this:
    Code:
    .sticky, .announce {
        /* you can add a background for stickies and announcements*/
    }
    and i changed it to this:
    Code:
    .sticky, .announce {
        background-color: #B6B9DC;
    }
    , put it back within the style files in my server, purged all cache, nothing has changed.

    I thought i could maybe get your help on this one, or at least your help on putting different (special??) forum icons for Announcments/global/stickies.

    Thank you,
    Omar.
     
  2. Arty

    Arty Administrator Designer

    Editing stylesheet in my 3.1 styles is rather tricky.

    After editing any .scss file you need to recompile stylesheet. phpBB doesn't natively support Sass, so it won't do that automatically.

    First you need to install Sass on your computer.

    If you are using Mac, things are very easy because it already has Ruby pre-installed. Open Terminal window, run this command:
    Code:
    sudo gem install sass
    and that's it. It will install everything.

    I haven't tried installing that on Windows yet. There is a tutorial here: http://sass-lang.com/install

    After installing Sass you need to compile stylesheet. Navigate to your theme directory, run this command in Terminal (Mac) or command prompt (Windows):
    Code:
    scss stylesheet.scss > stylesheet.css
    It will generate new stylesheet.css. After running that command upload newly generated stylesheet.css to your forum.
     
  3. omarrrio

    omarrrio New Member

    Thank you for your thourough response, i installed koala and tried to compile the scss file as instructed, but it keeps giving me this error:
    [​IMG]

    also i just noticed, may i ask is
    Code:
    .sticky, .announce {
        /* you can add a background for stickies and announcements*/
    }
    the background for the forumlist or the postdisplay ? because i am seeking to change the background color of the forum list.
     
  4. Arty

    Arty Administrator Designer

    You need to compile stylesheet.scss, not colours.scss. It includes colours.scss and all other files.

    Yes, that's the code you should change. This is default background color (from _style_config.scss):
    Code:
    $block-background:             #f4f4f4;   // Background of blocks
    
     
    omarrrio likes this.
  5. omarrrio

    omarrrio New Member

    Thank you for your response, and i appologize for being such a pain, but i did so far all this:
    1- download all the files in Elegance\Theme\
    2- Modify colours.scss, in this way:
    3- recompile stylesheet.scss
    4- upload all the files back replacing everything
    5- purge cash

    so far nothing happened.
     
  6. Arty

    Arty Administrator Designer

    Probably something went wrong in step 3.

    You can test it by opening stylesheet.css in text editor and search for parts of your custom code. It should be there.

    In phpBB 3.1 step 5 is needed only for templates, not stylesheets. But you do need to refresh page in browser to force browser to reload stylesheet.
     
    omarrrio likes this.
  7. omarrrio

    omarrrio New Member

    thanks, i saw my code inside the compiled css, maybe it's something on my end ?

    Edit: i see now what it changes, it changes the background of the pin icon on my stickies...
    [​IMG]
     
  8. Arty

    Arty Administrator Designer

    I've tested it, problem is those selectors are being overwritten by other selectors.

    Change it from
    Code:
    .sticky, .announce
    to
    Code:
    .forumbg ul.topiclist li.sticky, .forumbg ul.topiclist li.announce
     
    omarrrio likes this.
  9. omarrrio

    omarrrio New Member

    Working better than ever, thank you sir :)