Forums / Templates, Stylesheets, Page Layout / Header log placement

Header log placement

Locked
Results 1 to 20 of 25
This thread is locked. New replies are disabled.
27 May 2007, 03:17
#1
kp14 avatar

kp14

New Zenner

Join Date:
May 2007
Posts:
48
Plugin Contributions:
0

Header log placement

I would like to move my header logo to the top of the page while still keeping the links on the the right side. How do I do this? My url is http://www.publicmyth.com/shop/
27 May 2007, 09:27
#2
kobra avatar

kobra

Black Belt

Join Date:
Aug 2005
Posts:
31,500
Plugin Contributions:
4

Re: Header log placement

In your stylesheet.css file find these 2 entry areas and seperate out the #logo and then the #logoWrapper into their own entries and make them look like the following:
logo:
#logo  {
	float: left;
        position: absolute;
        top: 2px;
	}
.centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .centerBoxContentsAlsoPurch, .attribImg {
	float: left;
	}

logoWrapper:
#logoWrapper {
        height: 70px;
        }

#headerWrapper, #contentMainWrapper, #cartBoxListWrapper, #ezPageBoxList, #cartBoxListWrapper ul, #ezPageBoxList ul, #mainWrapper, #popupAdditionalImage, #popupImage {
	margin: 0em;
	padding: 0em;
	}
27 May 2007, 16:36
#3
kp14 avatar

kp14

New Zenner

Join Date:
May 2007
Posts:
48
Plugin Contributions:
0

Re: Header log placement

I put this in but the header logo didn't move. It did however change the product color swatches from horizontal to vertical. Thanks
27 May 2007, 17:41
#4
kp14 avatar

kp14

New Zenner

Join Date:
May 2007
Posts:
48
Plugin Contributions:
0

Re: Header log placement

any idea as to why this did not move my logo up?
27 May 2007, 17:43
#5
kobra avatar

kobra

Black Belt

Join Date:
Aug 2005
Posts:
31,500
Plugin Contributions:
4

Re: Header log placement

I put this in but the header logo didn't move. It did however change the product color swatches from horizontal to vertical. Thanks

I did this interactively using FireFox on your site and it does work...

Check that you added it to the correct files...
includes/templates/PM/css/stylesheet.css

There is no change that I posted that affects the display of the color swatches...

Triple check that you have closed the statements altered correctly
27 May 2007, 17:53
#6
kobra avatar

kobra

Black Belt

Join Date:
Aug 2005
Posts:
31,500
Plugin Contributions:
4

Re: Header log placement

I just checked and you did not apply what I posted....

you seperated out #headerWrapper and not #logoWrapper and then did not alter the #logo at all...Your currect Code for the #logo
#logo, .centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .centerBoxContentsAlsoPurch, .attribImg {
	float: left;
	}

And what you have for the #logoWrapper
#logoWrapper, #contentMainWrapper, #cartBoxListWrapper, #ezPageBoxList, #cartBoxListWrapper ul, #ezPageBoxList ul, #mainWrapper, #popupAdditionalImage, #popupImage {
	margin: 0em;
	padding: 0em;
	}
27 May 2007, 18:04
#7
kp14 avatar

kp14

New Zenner

Join Date:
May 2007
Posts:
48
Plugin Contributions:
0

Re: Header log placement

I was just trying different things here to see if there was any difference. I have now put it back to your suggestion. Here is my stylesheet

[php]
/**
* Main CSS Stylesheet
*
* @package templateSystem
* @copyright Copyright 2003-2005 Zen Cart Development Team
* @copyright Portions Copyright 2003 osCommerce
* @license http://www.zen-cart.com/license/2_0.txt GNU Public License V2.0
* @version $Id: stylesheet.css 5347 2006-12-22 20:26:09Z birdbrain $
*/
body {
margin: 0;
font-family: verdana, arial, helvetica, sans-serif;
font-size: 62.5%;
color: #000000;
background-color: #e5edf5;
}
a img {border: none; }
a:link, #navEZPagesTOC ul li a {
color: #3300FF;
text-decoration: none;
}

a:visited {
color: #3300FF;
text-decoration: none;
}
a:hover, #navEZPagesTOC ul li a:hover, #navMain ul li a:hover, #navSupp ul li a:hover, #navCatTabs ul li a:hover {
color: #FF0000;
}
a:active {
color: #0000FF;
}
h1 {
font-size: 1.5em;
}
h2 {
font-size: 1.4em;
}
h3 {
font-size: 1.3em;
}
h4, h5, h6, LABEL, h4.optionName, LEGEND, ADDRESS, .sideBoxContent, .larger{
font-size: 1.1em;
}
.biggerText {
font-size: 1.2em;
}
h1, h2, h3, h4, h5, h6 {
margin: 0.3em 3px;
}
CODE {
font-family: arial, verdana, helvetica, sans-serif;
font-size: 1em;
}
FORM, SELECT, INPUT {
display: inline;
font-size: 1em;
margin: 0.1em;
}
TEXTAREA {
/* float: left;*/
margin: auto;
display: block;
width: 95%;
}
input:focus, select:focus, textarea:focus {
background: #F0F8FF;
}
FIELDSET {
padding: 0.5em;
margin: 0.5em 0em;
border: 1px solid #cccccc;
}
LEGEND {
font-weight: bold;
padding: 0.3em;
}
LABEL, h4.optionName {
line-height: 1.5em;
padding: 0.2em;
}
LABEL.checkboxLabel, LABEL.radioButtonLabel {
margin: 0.5em 0.3em;
}
#logo (
float: left;
position: absolute;
top: 2px;
)
.centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .centerBoxContentsAlsoPurch, .attribImg {
float: left;
}
LABEL.inputLabel {
width: 11em;
float: left;
}
LABEL.inputLabelPayment {
width: 15em;
float: left;
}
LABEL.selectLabel, LABEL.switchedLabel, LABEL.uploadsLabel {
width: 12em;
float: left;
}
P, ADDRESS {
padding: 0.5em;
}
ADDRESS {
font-style: normal;
}
.clearBoth {
clear: both;
height:0;
font-size: 1px;
line-height: 0;
}
HR {
height: 1px;
margin-top: 0.5em;
border: none;
border-bottom: 1px solid #9a9a9a;
}
/*warnings, errors, messages*/
.messageStackWarning, .messageStackError, .messageStackSuccess, .messageStackCaution {
line-height: 3.8em;
padding: 0.2em;
border: 1px solid #000000;
}
.messageStackWarning, .messageStackError {
background-color: #ff0000;
color: #ffffff;
}
.messageStackSuccess {
background-color: #99FF99;
color: #000000;
}
.messageStackCaution {
background-color: #FFFF66;
color: #000000;
}
/*wrappers - page or section containers*/
#mainWrapper {
background-color: #ffffff;
text-align: left;
width: 750px;
vertical-align: top;
}
#logoWrapper (
height: 70px;
)
#headerWrapper, #contentMainWrapper, #cartBoxListWrapper, #ezPageBoxList, #cartBoxListWrapper ul, #ezPageBoxList ul, #mainWrapper, #popupAdditionalImage, #popupImage {
margin: 0em;
padding: 0em;
}
#navColumnOneWrapper, #navColumnTwoWrapper, #mainWrapper {
margin: auto;
}
#tagline {
display: none
}
#sendSpendWrapper {
border: 1px solid #cacaca;
float: right;
margin: 0em 0em 1em 1em;
}
.floatingBox, #accountLinksWrapper, #sendSpendWrapper, #checkoutShipto, #checkoutBillto, #navEZPagesTOCWrapper {
margin: 0;
width: 47%;
}
.wrapperAttribsOptions {
margin: 0.3em 0em;
}
/*navigation*/
.navSplitPagesResult {}
.navSplitPagesLinks {}
.navNextPrevCounter {
margin: 0em;
font-size: 0.9em;
}
.navNextPrevList {
display: inline;
white-space: nowrap;
margin: 0;
padding: 0.5em 0em;
list-style-type: none;
}
#navMainWrapper, #navSuppWrapper, #navCatTabsWrapper { color: #fc0; font-weight: bold; background-color: #fff; margin: 0; width: 100%; height: 1% }
#navMain ul, #navSupp ul, #navCatTabs ul {
margin: 0;
padding: 0.5em 0em;
list-style-type: none;
text-align: center;
line-height: 1em;
}
#navMain ul li, #navSupp ul li, #navCatTabs ul li {
display: inline;
}
#navMain ul li a, #navSupp ul li a, #navCatTabs ul li a { color: #333; font-size: 1em; text-decoration: none; white-space: nowrap; margin: 0; padding: 0 0.5em }
#navEZPagesTOCWrapper {
font-weight: bold;
float: right;
height: 1%;
border: 1px solid #000000;
}
#navEZPagesTOC ul {
margin: 0;
padding: 0.5em 0em;
list-style-type: none;
line-height: 1.5em;
}
#navEZPagesTOC ul li {
white-space: nowrap;
}
#navEZPagesTOC ul li a {
padding: 0em 0.5em;
margin: 0;
}
#navCategoryIcon, .buttonRow, #indexProductListCatDescription {
margin: 0.5em;
}
#navMainSearch {
float: right;
}
#navBreadCrumb { }
#navEZPagesTop { background-color: #dedede }
#navBreadCrumb, #navEZPagesTop {
font-size: 0.95em;
font-weight: bold;
margin: 0em;
padding: 0.5em;
}
#navColumnOne { background-color: #fff }
#navColumnTwo {
background-color: #00BFBF;
}
/*The main content classes*/
#contentColumnMain, #navColumnOne, #navColumnTwo, .centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .additionalImages, .centerBoxContentsSpecials, .centerBoxContentsAlsoPurch, .centerBoxContentsFeatured, .centerBoxContentsNew, .alert {
vertical-align: top;
}
/*.content,*/ #productDescription, .shippingEstimatorWrapper {
/*font-size: 1.2em;*/
padding: 0.5em;
}
.alert {
color: #FF0000;
margin-left: 0.5em;
}
.advisory {}
.important {
font-weight: bold;
}
.notice {}
.rating{}
.gvBal {
float: right;
}
.centerColumn, #bannerOne, #bannerTwo, #bannerThree, #bannerFour, #bannerFive, #bannerSix {
padding: 0.8em;
}
.smallText, #siteinfoLegal, #siteinfoCredits, #siteinfoStatus, #siteinfoIP {
font-size: 0.9em;
}
/*Shopping Cart Display*/
#cartAdd {
float: right;
text-align: center;
margin: 1em;
border: 1px solid #000000;
padding: 1em;
}
.tableHeading TH {
border-bottom: 1px solid #cccccc;
}
.tableHeading, #cartSubTotal {
background-color: #e9e9e9;
}
#cartSubTotal {
border-top: 1px solid #cccccc;
font-weight: bold;
text-align: right;
line-height: 2.2em;
padding-right: 2.5em;
}
.tableRow, .tableHeading, #cartSubTotal {
height: 2.2em;
}
.cartProductDisplay, .cartUnitDisplay, .cartTotalDisplay, .cartRemoveItemDisplay, .cartQuantityUpdate, .cartQuantity, #cartInstructionsDisplay, .cartTotalsDisplay {
padding: 0.5em 0em;
}
.cartUnitDisplay, .cartTotalDisplay {
text-align: right;
padding-right: 0.2em;
}
#scUpdateQuantity {
width: 2em;
}
.cartQuantity {
width: 4.7em;
}
.cartNewItem {
color: #33CC33;
position: relative; /*do not remove-fixes stupid IEbug*/
}
.cartOldItem {
color: #660099;
position: relative; /*do not remove-fixes stupid IEbug*/
}
.cartBoxTotal {
text-align: right;
font-weight: bold;
}
.cartRemoveItemDisplay {
width: 3.5em;
}
.cartAttribsList {
margin-left: 1em;
}
#mediaManager {
width: 50%;
margin: 0.2em;
padding: 0.5em;
}
.normalprice, .productSpecialPriceSale {
text-decoration: line-through;
}
.productSpecialPrice, .productSalePrice, .productSpecialPriceSale, .productPriceDiscount {
color: #ff0000;
}
.orderHistList {
margin: 1em;
padding: 0.2em 0em;
}
#cartBoxListWrapper ul, #ezPageBoxList ul {
list-style-type: none;
}
#cartBoxListWrapper li, #ezPageBoxList li, .cartBoxTotal {
margin: 0;
padding: 0.2em 0em;
}
#cartBoxEmpty, #cartBoxVoucherBalance {
font-weight: bold;
}
.totalBox {
width: 5.5em;
text-align: right;
padding: 0.2em;
}
.lineTitle, .amount {
text-align: right;
padding: 0.2em;
}
.amount {
width: 5.5em;
}
/*Image Display*/
#productMainImage, #reviewsInfoDefaultProductImage, #productReviewsDefaultProductImage, #reviewWriteMainImage {
margin: 0em 1em 1em 0em ;
}
.categoryIcon {}
#cartImage {
margin: 0.5em 1em;
}
/*Attributes*/
.attribImg {
width: 20%;
margin: 0.3em 0em;
}
.attributesComments {}
/*list box contents*/
.centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .additionalImages, .centerBoxContentsSpecials, .centerBoxContentsAlsoPurch, .centerBoxContentsFeatured, .centerBoxContentsNew {
margin: 1em 0em;
}
/*sideboxes*/
.columnLeft {}
h3.leftBoxHeading, h3.leftBoxHeading a { color: #333; font-size: 1.1em; background-color: #ffffff }
.leftBoxHeading, .centerBoxHeading { background-color: #ccc; margin: 0; padding: 0.5em 0.2em }
.leftBoxContainer {
border: 1px solid #ffffff;
margin-top: 1.5em;
}
.sideBoxContent {
background-color: #ffffff;
padding: 0.4em;
}
h3.rightBoxHeading, h3.rightBoxHeading a {
font-size: 1.1em;
color: #FFFF00;
}
.rightBoxHeading {
margin: 0em;
background-color: #663366;
padding: 0.2em 0em;
}
h3.leftBoxHeading a:hover {
color: #FF0000;
text-decoration: none;
}
h3.rightBoxHeading a:hover {
color: #FF0000;
text-decoration: none;
}
.rightBoxContent {
background-color: #ffffff;
margin-bottom: 1em;
}
.centeredContent, TH, #cartEmptyText, #cartBoxGVButton, #cartBoxEmpty, #cartBoxVoucherBalance, #navCatTabsWrapper, #navEZPageNextPrev, #bannerOne, #bannerTwo, #bannerThree, #bannerFour, #bannerFive, #bannerSix, #siteinfoLegal, #siteinfoCredits, #siteinfoStatus, #siteinfoIP, .center, .cartRemoveItemDisplay, .cartQuantityUpdate, .cartQuantity, .cartTotalsDisplay, #cartBoxGVBalance, .leftBoxHeading, .centerBoxHeading,.rightBoxHeading, .productListing-data, .accountQuantityDisplay, .ratingRow, LABEL#textAreaReviews, #productMainImage, #reviewsInfoDefaultProductImage, #productReviewsDefaultProductImage, #reviewWriteMainImage, .centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .additionalImages, .centerBoxContentsSpecials, .centerBoxContentsAlsoPurch, .centerBoxContentsFeatured, .centerBoxContentsNew, .gvBal, .attribImg {
text-align: center;
}
#bestsellers .wrapper {
margin: 0em 0em 0em 1.5em;
}
#bestsellers ol {
padding: 0;
margin-left: 1.1em;
}
#bestsellers li {
padding: 0;
margin: 0.3em 0em 0.3em 0em;
}
#bannerboxHeading {
background-color: #0000CC;
}
#upProductsHeading {
text-align: left;
}
#upDateHeading {
text-align: right;
}
/*misc*/
.back {
float: left;
}
.forward, #shoppingCartDefault #PPECbutton {
float: right;
}
.bold {
font-weight: bold;
}
.rowOdd {
background-color: #E8E8E8;
height: 1.5em;
vertical-align: top;
}
.rowEven {
background-color: #F0F0F0;
height: 1.5em;
vertical-align: top;
}
.hiddenField {
display: none;
}
.visibleField {
display: inline;
}
CAPTION {
/*display: none;*/
}
#myAccountGen li, #myAccountNotify li {
margin: 0;
}
.accountTotalDisplay, .accountTaxDisplay {
width: 20%;
text-align: right;
/*vertical-align: top*/
}
.accountQuantityDisplay {
width: 10%;
vertical-align: top
}
TR.tableHeading {
background-color: #cacaca;
height: 2em;
}
#siteMapList {
width: 90%;
float: right;
}
.ratingRow {
margin: 1em 0em 1.5em 0em;
}
LABEL#textAreaReviews {
font-weight: normal;
margin: 1em 0em;
}
#popupShippingEstimator, #popupSearchHelp, #popupAdditionalImage, #popupImage, #popupCVVHelp, #popupCouponHelp, #popupAtrribsQuantityPricesHelp, #infoShoppingCart {
background-color: #ffffff;
}
.information {padding: 10px 3px; line-height: 150%;}
[/php]
27 May 2007, 18:55
#8
kobra avatar

kobra

Black Belt

Join Date:
Aug 2005
Posts:
31,500
Plugin Contributions:
4

Re: Header log placement

I see that the code is there and appears not to be working....But again when I interactively edit this in FF - and paste over your entries (that look correct) with the same text - it behaves correctly...

What program are you using to edit these files?

Use a "Plain Text" editor like notepad

Or email me through my sig and I will mail you back a correct functioning stylesheet.
27 May 2007, 19:04
#9
kobra avatar

kobra

Black Belt

Join Date:
Aug 2005
Posts:
31,500
Plugin Contributions:
4

Re: Header log placement

I think that I see the issue here is the code copied from your posted stylesheet:
#logo (
 float: left;
 position: absolute;
 top: 2px;
 )


This needs to be brackets not paren's:
#logo {
 float: left;
 position: absolute;
 top: 2px;
}


Same with
#logoWrapper (
 height: 70px;
 )
27 May 2007, 19:20
#10
kp14 avatar

kp14

New Zenner

Join Date:
May 2007
Posts:
48
Plugin Contributions:
0

Re: Header log placement

That worked :clap:, Thanks! How do I move my ezpages bar up to the logo and center the ezpages links.
27 May 2007, 19:29
#11
kobra avatar

kobra

Black Belt

Join Date:
Aug 2005
Posts:
31,500
Plugin Contributions:
4

Re: Header log placement

Change your logoWrapper height to about 50px
and Edit the stylesheet here and add the missing semi-colon;
#navEZPagesTop  {
        background-color: #dedede;
        text-align: center;
 }
27 May 2007, 19:40
#12
kp14 avatar

kp14

New Zenner

Join Date:
May 2007
Posts:
48
Plugin Contributions:
0

Re: Header log placement

You're Awesome Kobra! Just one more question seeing as you are on a roll. How do I position "Currencies, Categories, New Products and Information" on the left side bar from center to left.
27 May 2007, 19:58
#13
kobra avatar

kobra

Black Belt

Join Date:
Aug 2005
Posts:
31,500
Plugin Contributions:
4

Re: Header log placement

Find & add
h3.leftBoxHeading, h3.leftBoxHeading a  { 
        color: #333;
        font-size: 1.1em;
        background-color: #ffffff;
        text-align: left;
        }
28 May 2007, 22:02
#14
kp14 avatar

kp14

New Zenner

Join Date:
May 2007
Posts:
48
Plugin Contributions:
0

Re: Header log placement

I am stumped once again. I have did some tpl_product_info display.php and stylesheet.css mods to rearange my attribute options on the product pages. I almost have it except I would like to get the "Color" and "Size" drop down boxes below my color swatches. Is this possible?
28 May 2007, 22:05
#15
kp14 avatar

kp14

New Zenner

Join Date:
May 2007
Posts:
48
Plugin Contributions:
0

Re: Header log placement

I almost forgot. I would like to place the drop down boxes side by side.
28 May 2007, 22:39
#16
kobra avatar

kobra

Black Belt

Join Date:
Aug 2005
Posts:
31,500
Plugin Contributions:
4

Re: Header log placement

I would like to get the "Color" and "Size" drop down boxes below my color swatches.
I would like to place the drop down boxes side by side.

Anything within reason is possible....
This is gonna take more than css to accomplish...
To begin to set them side-by-side you need to move them from beside the image to below the image just so you have room....in the tpl_product_info_display.php file insert a clear both like others in this file before the start of attributes entries. This will start these on a new line below what is above it. Then maybe the side by side can be addressed ...these are contained in one div so I can not be positive at this point...the drop box and swatches alignment will require additional coding and will depend on the space available first - then possibly adding a containing div around the attribimg entries???
28 May 2007, 23:18
#17
kp14 avatar

kp14

New Zenner

Join Date:
May 2007
Posts:
48
Plugin Contributions:
0

Re: Header log placement

I have inserted the <br class="clearBoth" /> above the attributes module in the tpl_product_info_display.php file and it droped the color swatches below the main product image. I am not sure what to do from here.
28 May 2007, 23:36
#18
kobra avatar

kobra

Black Belt

Join Date:
Aug 2005
Posts:
31,500
Plugin Contributions:
4

Re: Header log placement

Just like you have done for the product display you now have to reorder and re-code some things in tpl_modules_attributes.php to get what you want
29 May 2007, 00:01
#19
kp14 avatar

kp14

New Zenner

Join Date:
May 2007
Posts:
48
Plugin Contributions:
0

Re: Header log placement

Please excuse my ignorance as this new to me and I have tried to rearange some things in tpl_modules_attributes.php and I just seem to make it worse. Do you have any specific intructions I can try.
Thank you
29 May 2007, 02:01
#20
kobra avatar

kobra

Black Belt

Join Date:
Aug 2005
Posts:
31,500
Plugin Contributions:
4

Re: Header log placement

Sorry...Not right off

As this is a file level issue I would have to setup a cart that resembled yours to correctly adjust this