Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • #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 http://luciannarusso.co.uk/

    Any help would be greatly appreciated!

    #107062

    Hi,

    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

    #107063

    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?

    #107064

    Hi,

    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. http://www.clipular.com/c?2083284=w0yQ7inzH7xgqqpLOwms_b5NA-Y 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 http://www.kriesi.at/themes/flashlight/ where these problems do not exist, it may be easier to just change the demo to the color you want http://www.clipular.com/c?2076321=S-a8aOMflJHkdhDOy-MqgdgFzcc other then reconstructing the missing bits.

    Thanks,

    Nick

    #107065

    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?

    #107066

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

    #107067

    Hi,

    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. winmerge.org 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);
    }

    Thanks,

    Nick

    #107068

    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?

    #107069

    Hi,

    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.

    Thanks,

    Nick

    #107070

    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.

    http://www.kriesi.at/themes/flashlight/

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

    #107071

    Hi,

    If you don’t have any pages that use this configuration ( http://www.clipular.com/c?2229071=z5NjSyhsQPsgxP-JsQ-iVmMdKRs ) .. then you can just replace the 3 buttons (back, play, forward) with the social media buttons. Would that be something that works for you?

    Thanks,

    Nick

    #107072

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

    Thanks for your patience Nick!

    #107073

    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 {
    display:none;
    }

    Regards,

    Devin

    #107074

    Thanks guys. Great service!

    High five.

    #107075

    Glad we could help :)

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

    Regards,

    Devin

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

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