Layout changes

I'd like to make 3 layout changes, but I am not totally sure how. I know I probably need to change things in my stylesheet...

URL: https://shop.thebricktongroup.com/

1) I'd like to add margins on the side of my page so the actually text/images doesn't spread across the whole browser.

2) I'd like to move my tagline (Happy Holidays from all of us at..." up so it's verticle position is the same as the middle of my logo. In other words, the tagline is displaying below my logo right now and I want it to be beside it.

3) I'd like to align my logo in the center of the page.

I tried changing my stylesheet as shown below, but no luck:

PHP Code:

---

#logo, .centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .centerBoxContentsAlsoPurch, .attribImg {
    float: left;
}

#logo {text-align: center;} 


---

I'm pretty frustrated as I've been trying to figure these things out for 3 hours to no avail. Thanks for any help!

1:

open the tpl_mainpage.php in the common folder

you will find first <table >

add width="90%" and remove that id tag in that <table>

and see

vr4indian######################

thanks

You need to remove #logo from that first line that floats it left then your logo will center with the text align you have set.

I don't see a tagline at all so I can't tell you how to fix that.

And I see that your page is padded a little, are you wanting to bring it in more ?

Find and edit the width of the mainWrapper and that will fix your width issue.

HTH

If I got what you want correct concerning the page width, try this and adjust the highlighted value as you see fit:

Code:

---

#mainWrapper {
    background-color: #ffffff;
    text-align: left;
    width: 90%;
    border: 1px solid #ccc;
}

---

Separate the #logo tag...so change this:

Code:

---

#logo, .centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .centerBoxContentsAlsoPurch, .attribImg {
    float: left;
}

---

to this:

Code:

---

#logo {
text-align: center;
}

.centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .centerBoxContentsAlsoPurch, .attribImg {
    float: left;
}

---

Also did not see a tagline and with a logo that is 750px wide there may not be the space to place it next to the logo, but you can adjust the vertical position by adding a height statement and vertical-align statement and make adjustments as required like this:

Code:

---

#tagline {
    padding: 1em 0 0 0;
    padding-top: 90px;
    text-align : center;
    color: #003300;
}

---

To this:

Code:

---

#tagline {
    padding: 1em 0 0 0;
    float: right;
    color: #003300;
    line-height: 80px;
    vertical-align: bottom or middle;
}

---