Monitor Reply

Support & Feature Requests

Modify the blue bar across the top of the theme

Permalink Browser Info Environment October 24, 2014 at 10:58 PM

HI I was wondering if you could help me make that blue bar that goes across the top of the page deeper in height so that my Amiant CSS3 menu bar (I have 2 lines) shows up well. The second line isn't very well seen on the white/blue below the bar. I just need to make it deeper. Also, if you could possibly tell me how to put a footer menu at the bottom so it can go back to the home page, I would appreciate it. I don't know how to code Css.
My webpage ishttp://wanderz.us

Thank you for your time.

I don't understand the concrete project page cause I am using my ipage and going from there. If you give me explicit instructions, aimed at someone who is not code knowledgable, I can follow directions. I did copy the package theme over to my root theme folder like the concrete 5 said to do and it is showing on my dashboard as Soul Mate Custom so that I don't mix it up with the original and mess it up totally if I do something to the code.

Can you help me? Thanks.

Type:	Discussion
Status:	In Progress

cannonf700 replied on Oct 25, 2014 at 2:35 am Permalink Reply

Wanderful,
I'll do my best to describe what needs to happen but you might need to take some time to get familiar with the Concrete5 framework and a little bit of what happens when you change code.

So your issue is that the background is a fixed width and height image. you need to remove the image and rebuild the background using some new CSS rules.

You need to find the copied theme folder on your server and open it until you find the main.css file. Usually the path will look something like this: root/packages/cannonf700_soul_mate/themes/soulmate/themes/main.css

When you find the main.css file open it either using your cpanel's code editor or something like Notepad ++

go down to line 21 where you will find this line of code

#menu {
    background: url("http://www.rynomediaonline.com/rynomediaonline.com/themes/soul_mate/images/menu_bg.gif") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
    float: left;
    height: 37px;
    margin: 0;
    padding: 0 0 8px;
    text-align: center;
    width: 884px;
}

You need to remove this and replace it with this:

#menu {
    background: linear-gradient(to bottom, #1e5799 0%, #2989d8 0%, #207cca 51%, #7db9e8 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);
    float: left;
    height: 74px;
    margin: 0;
    padding: 0 0 8px;
    text-align: center;
    width: 884px;
    border-radius: 10px 10px 0 0;}

You will then need to back up to line 19 of the main.css file and change the code so that it looks like this:

#body_container_inner {
    background: none repeat scroll 0 0 #fff;
    float: left;
    margin: 0;
    width: 884px;
    border-radius:10px 10px 0 0
}

That's it. It won't look exactly like it did before but should get you close enough.

Good luck

Soul Mate

Support & Feature Requests

Modify the blue bar across the top of the theme

Issue Reply

concrete5 Environment Information

Browser User-Agent String

Hide Post Content

Request Refund

Code

Delete Post