Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
  • #20289

    Hi guys,

    I need to make my Flashlight left sidebar one semi transparent background colour which spans from top to bottom of the page

    I’ve managed to change the colour (pretty ugly hack) but the sidebar with nav items is darker than the ‘absolute sidebar’ which sits behind it.

    I also want to have all the ‘box’ elements across the site matching colour/semi-transparency.

    This is the site for reference

    Any help would be greatly appreciated!



    You can make the top part more inline with the middle part, since the top part is nearly invisible as is, and were you to make the middle section of the sidebar that transparent, the navigation would become unreadable.

    Please add this to your custom.css or to Quick CSS

    #top .box {
    background-color: rgba(41, 18, 18, 0.93) !important;
    #top .sidebar {
    background: rgba(41, 18, 18, 0.93) !important;




    Thanks Nick, that’s most the way there!

    The Nav bar with text is still darker though. Is it possible for me to have one uniform background colour from top to bottom?

    Also in this sidebar is there a way I can fix the existing social media box to the bottom of the page/sidebar?



    Please add this css to fix the top vertical line

    #top .border-transparent.border-transparent-right {
    width: 0px !important;

    I am showing color #311c1f to be the brown color on the left edge at every location of the sidebar. The color is uniform. Take a snapshot and bring it into photoshop to see for yourself. I think you must have a taller screen then I do.

    I tried to make a solid line but unfortunately the amount of css that was changed is making it difficult. Looking at the theme demo where these problems do not exist, it may be easier to just change the demo to the color you want other then reconstructing the missing bits.




    Is there an easy way to revert the CSS back to the original demo so I can change that as you suggest? (I’d love to keep all the menus and images I’ve uploaded already)

    Also is it possible to fix the existing social media box to the bottom of the page/sidebar?


    And yes, I’d love to go for the mod you’ve demonstrated! What would be the best way to achieve this?



    If all the customizations you’ve made were via css , what i would download a fresh theme from themeforest, and compare the css files to your current files. has a free applet (called winmerge) that compares on a line by line basis any files. so that you can instantly see the lines where you made edits as well as where you killed the bottom media box.

    I use the Google Developer Tools add-on for the Chrome browser to change colors and then copy and paste the bits of CSS I change into the custom.css file of the theme. I am not sure how you go about modifying CSS, but if you aren’t using either firebug for firefox or the google developer tools with Chrome, than you are doing it wrong. (or not optimally rather).

    This is the code I used to change the demo page:

    #top .sidebar .box {
    background-color: rgba(75, 45, 45, 0.91);
    #top .arrowslidecontrolls_fullscreen {
    background-color: rgba(75, 45, 45, 0);
    #top .box{
    background: rgba(75, 45, 45, 0.91);




    Perfect. Thanks so much Nick, you’re a champ!

    One last query.

    In this sidebar is there a way I can fix the existing social media box to the very bottom of the page/sidebar?



    In the unmodified code that comes with the website, that box is fixed to the bottom. In your modifications , it is not. It would require more time to undo your modifications than it would take to use the original css that came with the theme as I describe in the previous reply.




    Hi Nick,

    The unmodified code (I reset it to this) actually has a arrowslide controls at the bottom. The social media box is actually fixed directly beneath the nav section.

    Is there an easy mod to fix the social media box to the bottom of the page?



    If you don’t have any pages that use this configuration ( ) .. then you can just replace the 3 buttons (back, play, forward) with the social media buttons. Would that be something that works for you?




    Yes, that would be great. Is there a quick CSS overwrite for this?

    Thanks for your patience Nick!


    Hi 8inthemiddle,

    Try adding the following CSS to your Quick CSS (located under the Styling Tab in the theme options) or the custom.css file in the css folder of your theme files:

    #socket {
    padding: 20px 15px;
    position: fixed;
    bottom: 0;
    left: 50px;
    z-index: 101;
    width: 190px;
    top: auto;

    As long as you don’t have the arrow controls turned on, this should work fine.

    If you want to just make sure they never show up also add:

    .arrowslidecontrolls_fullscreen {




    Thanks guys. Great service!

    High five.


    Glad we could help :)

    Let us know if you have any other questions or issues.



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

The topic ‘How to make sidebar one colour’ is closed to new replies.