How To Reposition Attributes?

[niccol]

OK. This is great. Now we are rolling!

Do you by any chance use firefox? If so an addon called web developer toolbar is going to help you.

Let me know...

[niccol]

Just to get going add this to the bottom of your stylesheet:

#attributeBox-photo1{height:1em;}
#attributeBox-photo1 .optionName{width:14em;}
#attributeBox-photo2{height:1em;}
#attributeBox-photo2 .optionName{width:14em;}
#attributeBox-photo3{height:1em;}
#attributeBox-photo3 .optionName{width:14em;}
#attributeBox-backgroundphoto4{height:1em;}
#attributeBox-backgroundphoto4 .optionName{width:14em;}
#attributeBox-photo5{height:1em;}
#attributeBox-photo5 .optionName{width:14em;}

[niccol]

If you have done the previous post you can see that what we have achieved so far is to put an ID into each block so we can style them individually. It works well.

BUT....

You missed out one of the steps in the other thread I am afraid. We need to remove some <br class="clearBoth" /> from the code because they are going to limit what we can do. It is post 14 in the other thread

It will make a mess of the layout for the time being but don't worry - it will give us complete control through the css.

At the moment each attribute looks like this in the HTML:

<div class="wrapperAttribsOptions" id="attributeBox-photo1">

<h4 class="optionName back"><label class="attribsUploads" for="attrib-1-0">Photo 1</label></h4>

<div class="back">
<input type="file" name="id[txt_1]"  id="attrib-1-0" /><br />
<input type="hidden" name="upload_1" value="1" />
<input type="hidden" name="txt_upload_1" />
</div>
<br class="clearBoth" />
</div>

<br class="clearBoth" />

You can see the <br> that we want to get rid of. You can also see the new ID, in this case #attributeBox-photo1

[niccol]

As far as the stylesheets go your plan of keeping a back up is a good one!

Except that you need to name it something that does not begin with 'style'. Or does not end with .css.

How about backup_stylesheet.txt ? However you do it remember that zen will load any stylesheets that begin with the letters 'style'

[youshine]

Dear Niccol,

I did not know that the thread that you asked me to look at has 2 more pages.

I did take out the <br...> thing and I see now the photo1, photo2, etc line up without any space between.

I tried in vain to create some space between photo5 and "$5 per person" for now they are almost merged together.

And tried to make the how many person input box smaller by changing the size to 32 but nothing happens... maybe somewhere I have css code overriding it?

Please notice that I added all the attribute names at the end of my stylesheet.css as follows.


#attributeBox-photolocation{height:1em;}
#attributeBox-photolocation .optionName{width:14em;}
##attributeBox-photoenhancement{height:1em;}
#attributeBox-photoenhancement .optionName{width:14em;}
attributeBox-photo1{height:1em;}
#attributeBox-photo1 .optionName{width:14em;}
#attributeBox-photo2{height:1em;}
#attributeBox-photo2 .optionName{width:14em;}
#attributeBox-photo3{height:1em;}
#attributeBox-photo3 .optionName{width:14em;}
#attributeBox-backgroundphoto4{height:1em;}
#attributeBox-backgroundphoto4 .optionName{width:14em;}
#attributeBox-photo5{height:5em;}
#attributeBox-photo5 .optionName{width:14em;}
#attributeBox-howmanyperson{height:5em;}
#attributeBox-howmanyperson .optionName{width:14em;}
#attributeBox-selectbackground{height:1em;}
#attributeBox-selectbackground.optionName{width:14em;}
#attributeBox-size{height:1em;}
#attributeBox-size .optionName{width:14em;}
#attributeBox-letteringlocation{height:1em;}
#attributeBox-letteringlocation .optionName{width:14em;}
#attributeBox-letteringtext{height:1em;}
#attributeBox-letteringtext .optionName{width:14em;}
#attributeBox-fonttype{height:1em;}
#attributeBox-fonttype .optionName{width:14em;}
#attributeBox-fontcolor{height:1em;}
#attributeBox-fontcolor .optionName{width:14em;}

I tried also " input{width:5px;}" with no success...

Waiting for your further coaching...

P.S. I do use Firefox and installed Web Developer per your advice...

[niccol]

OK. Put this at the bottom instead of the other stuff from before:

#attributeBox-photo1{height:1em;}
#attributeBox-photo1 .optionName{width:14em;}
#attributeBox-photo2{height:1em; clear:both}
#attributeBox-photo2 .optionName{width:14em;}
#attributeBox-photo3{height:1em;clear:both}
#attributeBox-photo3 .optionName{width:14em;}
#attributeBox-backgroundphoto4{height:1em;clear:both}
#attributeBox-backgroundphoto4 .optionName{width:14em;}
#attributeBox-photo5{height:1em;clear:both}
#attributeBox-photo5 .optionName{width:14em;}

#attributeBox-photoenhancement .optionName{width:20em;}
.attributesComments{clear:both;}

You will see that I am slowly working my way down the page.

Unfortunately it is late and I must sleep so the rest will wait for tomorrow I am afraid!

[youshine]

May you have a good and sound sleep...

I changed my Stylesheet.css with the codes you gave last..., and see nothing much changed ... on the screen...

[niccol]

New css in file that is attached. Also a screen shot of where that takes us. Getting there I think. I am sure that you can fiddle with it and make it look better!

You need to add an option comment for lettering location (done in admin) that will make the column headings. All the headings will be in the comment. Then we will get rid of the existing word 'location' via the css which is just there as a placeholder at the moment.

let me know...

[kolikata21]

Then, we used the css file to style these elements to wherever we wanted.

Be aware that if you have different attributes on different product pages then you want to be careful because these IDs are numbered from the first on the page incrementally. With hindsight, it would have been better to add the ID including the attribute name. This is pretty easily done but just didn't occur to me at the time

Acai Berry

[missinglife]

note for record, dont mind me :)