Default Global Options display

Hi there, is there any way of making the global options dropdown list sit appropriately to the left like the QTY:



I don't understand why it's so far out. Presuming it's padding or margins but having tried to tweak the code via inspect element, I can't fix it.



Not a natural coder but good enough to jump into dreamweaver and change this upon a brief from somone who knows how.



Thanks so much in advance for helping with what is probably a simple issue that's defeated my skillset!





[attachment=6957:marce-maker-layout issue.jpg]

marce-maker-layout issue.jpg

Could someone explain how the politics in this forum works?



I seem to be continuosly ignored! Despite making an effort to help people with experiences I've had.

Politics? Post a question, wait for an answer, or a sympathetic post. It all depends on whether or not someone looking at your post knows a solution. The forum is not the Help Desk. It's voluntary collaboration among the users of the software.



Personally, I've looked at the templates and CSS that should be controlling the labels for options, and the labels for other values on the product detail page (like Reward Points, Return Period, etc - which all display with the same alignment IF you turn them on) and I can't find at all where to adjust the space between the label and the values.

Seems like it should be in CSS somewhere, but it just eludes me.

[quote name=‘Magpie Don’ timestamp=‘1371323147’ post=‘163674’]

Politics? Post a question, wait for an answer, or a sympathetic post. It all depends on whether or not someone looking at your post knows a solution. The forum is not the Help Desk. It’s voluntary collaboration among the users of the software.



Personally, I’ve looked at the templates and CSS that should be controlling the labels for options, and the labels for other values on the product detail page (like Reward Points, Return Period, etc - which all display with the same alignment IF you turn them on) and I can’t find at all where to adjust the space between the label and the values.

Seems like it should be in CSS somewhere, but it just eludes me.

[/quote]



Thanks for your response!



I don’t want to be spoon fed I’m just craving some interaction if at all possible!



Due to my skillset, the ratio of ask to answer is leaning towards ask, but I am chipping in on peoples questions as and where I’ve had an experience to comment.



Just frustrated with a few parts of my cart and hungry to actually release the beast into the wilds of the search engines ASAP!



:mrgreen:

You know, you can always fill the gap between the label and the select box by renaming the option to something longer, i.e. Select a Size or Select Size. Not a true fix, but the reason there is so much space is so you can put a longer value into the space for the option's name. For a while I had a problem where the space was not large enough and I had to shorten the name of the option.



I did spend about 45 minutes trying to find where that padding, or margin is formatted today and I still can't find it anywhere. I'm fairly certain that it's fixed for ALL the values that are displayed in the product's details - because everything lines up the same, not just options.

[quote name='Magpie Don' timestamp='1371325602' post='163680']

You know, you can always fill the gap between the label and the select box by renaming the option to something longer, i.e. Select a Size or Select Size. Not a true fix, but the reason there is so much space is so you can put a longer value into the space for the option's name. For a while I had a problem where the space was not large enough and I had to shorten the name of the option.



I did spend about 45 minutes trying to find where that padding, or margin is formatted today and I still can't find it anywhere. I'm fairly certain that it's fixed for ALL the values that are displayed in the product's details - because everything lines up the same, not just options.

[/quote]



Thanks, I reckon I might go about doing it that way as a workaround for now.



I use Inspect Element on Firefox to identify where things are on the style sheet.



You probably know all about that but it's kind of like my only way at winning the 'battle ships' game that is coding.





What sort of level are you at generally? Are you a coder or more down the entrepreneurial but getting hands on route like me???



It would be nice to show my site to another cart user so they can nitpick things I'm doing wrong or inefficiently before I expand outside the one category I've set up so far.

I found something in CSS.

In styles.css (in your skins/skinname/customer folder, on line 2394 (ver 3.0.6) there is this class:





.product-list-field span, .vendor-list-field span, #content_subscribtion .form-field span {

color: #757575;

display: inline-block;

padding: 6px 0;

[color=#ff0000] margin: 0 -20px;[/color]

}

I strongly suggest that you put any CSS changes into the my_changes folder though.



I added the margin value and used a negative pixel value and that reduced the width of the space - not sure how this will impact other form fields though.



I use the Firebug addon for Firefox to debug CSS - it’s much better than the built in Element Inspection tool, and it’s free. I’ve worked in eCommerce for 13 years, I’m no programmer, but I know my way around HTML, PHP and CSS. Left the rat race in 2010 and now I just work for myself. My CS-Cart store makes me a living. :) I do it all myself.

[quote name=‘Magpie Don’ timestamp=‘1371326869’ post=‘163686’]

I found something in CSS.

In styles.css (in your skins/skinname/customer folder, on line 2394 (ver 3.0.6) there is this class:





.product-list-field span, .vendor-list-field span, #content_subscribtion .form-field span {

color: #757575;

display: inline-block;

padding: 6px 0;

[color=#ff0000] margin: 0 -20px;[/color]

}

I strongly suggest that you put any CSS changes into the my_changes folder though.



I added the margin value and used a negative pixel value and that reduced the width of the space - not sure how this will impact other form fields though.



I use the Firebug addon for Firefox to debug CSS - it’s much better than the built in Element Inspection tool, and it’s free. I’ve worked in eCommerce for 13 years, I’m no programmer, but I know my way around HTML, PHP and CSS. Left the rat race in 2010 and now I just work for myself. My CS-Cart store makes me a living. :) I do it all myself.

[/quote]



MMMM…I’m not sure I’ve gone and set up a ‘mychanges’ folder yet. (However beyond adding features and making design changes within the online admin, I haven’t tweaked any code yet.



I’m going to PM you mate.



-Marcemaker

I found a way to reduce the left margin for the product option's values so you can move the select box closer to the name of the option. You just need to add this line to your custom css file:


.product-list-field input[type="text"], .product-list-field input[type="password"], .product-list-field textarea, .product-list-field select, .product-list-field scroll-y, .product-list-field span, .product-list-field .description {margin: 0 3px 0 -20px;}



Adjust the number of pixels for the left margin from -20 to whatever looks good - it really depends upon whether your option's name is very long or very short.

To setup My Changes addon:

Enable Addon: My Changes.

Create my_changes folder: skins/skinname/customer/addons/[color=#ff0000]my_changes[/color] (unless it gets created automatically - I can't remember)



To set up your own CSS file:

Make a new text document named [color=#ff0000]YOURNAME.css[/color] (I name mine black_styles.css because that stylesheet formats the background black).

Upload the css file to the my_changes folder. This css file will include any css values that you create (like the one I posted above) & it will override any values in the other css files. So it is safe to put all your changes into it and never change any of the css that are in the cart's files.



To apply your own CSS file:

Create 2 new folders, nested in the my_changes folder: skins/skinname/customer/addons/my_changes[color=#ff0000]/hooks/index/[/color]

Create a new text document and name it [color=#ff0000]styles.post.tpl[/color] with just this for contents:






Upload styles.post.tpl to the /my_changes/hooks/index/ folder

Clear your cache.

Magpie Don, you are the man…apologies for being cranky!



I was getting annoyed as I couldn't work out how frequently used the forum is or whether people were struggling to see my posts.



I will make these vital changes on a fresh head in the morning!



Cheers.

[quote name='Magpie Don' timestamp='1371330597' post='163693']

I found a way to reduce the left margin for the product option's values so you can move the select box closer to the name of the option. You just need to add this line to your custom css file:


.product-list-field input[type="text"], .product-list-field input[type="password"], .product-list-field textarea, .product-list-field select, .product-list-field scroll-y, .product-list-field span, .product-list-field .description {margin: 0 3px 0 -20px;}



Adjust the number of pixels for the left margin from -20 to whatever looks good - it really depends upon whether your option's name is very long or very short.

[/quote]



I'm guessing you will then have the reverse problem if you require a longer option name down the line.



Still though, the standard QTY: (quantity) part seems pretty compact.



They possibly should have included a flexible/responsive width to shift along with the text based on length.



I will try this asap as a solution!



Night.

[quote name='Magpie Don' timestamp='1371331155' post='163694']

To setup My Changes addon:

Enable Addon: My Changes.

Create my_changes folder: skins/skinname/customer/addons/[color=#ff0000]my_changes[/color] (unless it gets created automatically - I can't remember)



To set up your own CSS file:

Make a new text document named [color=#ff0000]YOURNAME.css[/color] (I name mine black_styles.css because that stylesheet formats the background black).

Upload the css file to the my_changes folder. This css file will include any css values that you create (like the one I posted above) & it will override any values in the other css files. So it is safe to put all your changes into it and never change any of the css that are in the cart's files.



To apply your own CSS file:

Create 2 new folders, nested in the my_changes folder: skins/skinname/customer/addons/my_changes[color=#ff0000]/hooks/index/[/color]

Create a new text document and name it [color=#ff0000]styles.post.tpl[/color] with just this for contents:






Upload styles.post.tpl to the /my_changes/hooks/index/ folder

Clear your cache.

[/quote]



Hi there,



I have got around to doing this.



I have the mychanges style sheet in the mychanges root folder and have created the /hooks/index/ folders within.



In the /index/ I have created the style.post.tpl with your supplied coding. (and changed mysite.css to the actual css title I created)





I have ensured mychanges is active in addons.





I have added your margin code above as suggested however this hasn't made a change.





Do I need to use an importURL: ('http://mysite.com') ; To link the style sheet?





I'm guessing this is very familiar to a Wordpress Child Theme.



I've followed the steps but probably haven't synced it up with the original style sheet yet, somehow.





Lastly to confirm, I did set these up in text document and then saved as all files, which activated it as more than just text if that makes sense. (It has the dreamweaver logos to assure me)

There are two my_changes folders.

One is in the addons folder, the other is in the skins/SKINNAME/customer/addons folder.

You should be using the second one, within your skin's folder. That's where the stylesheets styles.post.tpl go.

It sound like you put them in the root addons folder.



If you still don't see your stylesheet being applied, make certain that the class you have defined in the sheet has a closing semi-colon and curly brace.

You must clear your store's cache on the server. If you have enabled CSS Joining then you definitely need to clear your server side cache. You must refresh your browser - your browser will cache CSS.



You do not include a fully qualified domain name in the link to the stylesheet. The code takes care of the path. Apache takes care of the domain name. The styles.post.tpl file should only include this (change YOURNAME.css to the name of your css file):


[quote name='Magpie Don' timestamp='1371447682' post='163751']

There are two my_changes folders.

One is in the addons folder, the other is in the skins/SKINNAME/customer/addons folder.

You should be using the second one, within your skin's folder. That's where the stylesheets styles.post.tpl go.

It sound like you put them in the root addons folder.

[/quote]





Ok, I did originally put the my_changes folder into addons/ rather than skins as you suggested. (Sorry!)



Changes have now been made to the /Skins/ folders and I used CC cleaner too clear my cache





The change I have entered into Style.css is your margin code above.





Please see attached.



Filezilla entries



[attachment=6965:screen1.png]



[attachment=6966:screen2.png]



[attachment=6967:screen3.png]



Post.TPL entry



[attachment=6964:postdottpl entry.png]



Stylesheet



[attachment=6968:stylesheet margin entry.png]





Perhaps my style.css is in the wrong folder?

postdottpl entry.png

screen1.png

screen2.png

screen3.png

stylesheet margin entry.png

It looks like you put the files in the proper locations :-)



You may have to clear the store cache on your server to see your changes. To do this, go to your store’s admin page - whatever you renamed it to and put ?cc after php. It’s like www.domainame.com/admin.php?cc - run the cc command and you will clear the server cache in the var folder. You don’t normally have to clear the cache on the server after a CSS change unless you are joining the css files together though.

Ah, I did the ?CC and saw the margin move to the left slightly.



Thank you.



So you can literally add patches of altered code to this folder now?





I am presuming you can add more than just style.css chages in here.





Do you need to CC after every my_changes?

Also, try putting something into your custom stylesheet that will be very noticeable like this (This will turn all your text red):

body, div, p {color: #CC0033;}



One thing I like to do is to change the color of the hint in the search field like this:

.cm-hint {color: #CC0033 !important;}



I'm just saying, put some color changes into the stylesheet you have in your my_changes folder so you can immediately see it is being applied, because the changes to the margins in the product info is more subtle and not as noticeable.

[quote name='marcemaker' timestamp='1371570436' post='163915']

Ah, I did the ?CC and saw the margin move to the left slightly.



Thank you.



So you can literally add patches of altered code to this folder now?



I am presuming you can add more than just style.css chages in here.



Do you need to CC after every my_changes?

[/quote]

You should probably familiarize yourself with the KB articles and forum posts on all the stuff you can do with my_changes. You can add code BEFORE (pre), AFTER (post) or override (override), anywhere a {hook} is defined in the CS-Cart code base. This way you can modify/customize the templates without actually editing them - so you can install updates without losing your changes.



You don't need to CC after CSS changes unless you are joining css in your local.config.php script - but you did need to do it the first time you started to use the styles.post.tpl script because your store cached the “links” to the CSS files.

Templates cache. PHP doesn't. CSS doesn't (unless you changed the joining css to “true”).

Thank you Don.



I reckon one step at a time for me!



I will make obvious colour changes to make sure as you have done.



It's mainly style changes I need to make in the immediate present.





Now that I have one for the style, at least I have a clue where other bits and pieces I want to change would need to go!





Marcemaker.