Style Sheets ? how to..

[Nik Grey]

.. This forum has been invaluable to me, without it theres no way I would be able to get to where I want (that time is getting closer).

 

With thanks to Brian I now have my 'Tool' working BUT I need to tweak it a bit as aspects of it have been moved around and it's not looking as it should.

 

Here's what I am talking about (hopefully in the near future when people see this it will all be displaying as it should).

 

So, before the weekend I asked Jonathan why things weren't looking quite right - he said it was a 'Style Sheet' issue ! Where would I find the style sheet for this Vector skin.

 

I guess I can just edit this file until I am happy - I cant really mess anything up beyond repair !

 

Here's a screenshot:

 

 

As you can see - the grey background of the lettering at the top does not extend as far as the blue box below it.

 

'View Font Styles' text is not aligned correctly.

 

Bold, Italic and Reverse cut - radio buttons are not aligned.

 

And the pull down menu's at the bottom are also outside of the blue box.

 

 

This is what I am trying to tidy up.

 

 

[bsmither]

Firebug will be able to assist you with trying out changes to the CSS.

 

Let's start with the fact that the Vector skin seems to be fluid -- it fills the width of the browser no matter what the width. But the Lettering Tool areas are not.

 

The blue area, settings, for example, is a container (div) that can be as wide as it's parent container, designform. designform is 1070px. Firebug (HTML tab) shows us, by clicking on the <div id="designform"> statement in the left pane, the CCS rules that are applying to it are shown in the right pane. We see that letter.css, line 157, sets the width. By hovering over the word width:, there will be a red stop sign shown. Clicking on the red stop sign will disable that property (until the next page load, or you click it off). With the width disabled, designform fits as wide as the skin.

 

Just above settings is the tk container. It has no width property, so let's look deeper. Within tk is text and it has a width of 1070px. Let's disable the width property.

 

Within text is an <img> tag. The tag itself has a height attribute, and the skin's CSS generally applies a max-width of 100%.

 

It's an interesting exercise in patience as you begin to realize that the skin's CSS rules (and it's id names) could collide with the tool's CSS rules (and it's id names). So, good luck with that.

[Nik Grey]

ok, finally found it.

in Firebug - drilling down to Australia it seems !

 

So, I commented out the width for the designform (line 157) and the tk (line 161) and it looks better - I did try adding 'height: 1000px;' to the designform part to try and make it cover the drop down menu's at the bottom but it had no effect

 

And the Tool won't load when Firebug is running !

[bsmither]

designform has no CSS property for height. Within designform are tk and settings. tk has no height, but text within does. settings has height. So, text + settings = designform, the blue area.

 

Does it add up? Technically, yes. Practically, no. The reason is how floating containers work. Within settings is designerleftcolumn and designerrightcolumn. Both are floaters and are as high as they need to be, and as such, can seem to flow outside the boundaries of their parent container. So, we need to adjust settings to be a fixed height taller, or let settings grow as tall as the tallest thing inside it.

 

A fixed height for settings of 550px looks good, until we fix the stuff inside designerleftcolumn. To let settings grow as tall as its contents, we could unfloat designerleftcolumn, but that is a bad choice. A lot of things go wrong which will need a large number of band-aids to fix. Fortunately, the skin has a CSS class called "clearfix". Edit the lettering template file to be:

<div id="settings" class="clearfix" >

and removing the height property from #settings in letter.css, line 169.

[bsmither]

Let me explain another trick Firebug gives you. On Firebug's menu bar, on the left, is a tool button that has a rectangle with a mouse cursor in it. Click once on that button to activate it.

 

Now move the mouse cursor over a blank spot of the blue area (the settings div). Firebug will draw a border around the smallest container that contains the mouse cursor. Firebug will also expand and highlight the HTML statement that describes this container. Click on the blank spot and Firebug will disengage the Inspector tool with the relevant HTML and CSS showing.

[Nik Grey]

I haven't responded as I have been trying to work out where the Lettering Template File is.

 

The closest I can find in lettering.css is:

#page_content{
	padding:0px !important;
	}
	#designform{
	width:1070px;
	}
	#text
	{
		height:170px;
		/* border:1px solid grey; */
		width:1070px;
		overflow:auto;
		
	}
	#settings
	{
	background:#F0F7FF !important;
	height:350px;
	}

With any ref to 'Settings'.

 

I see in Firebug:

<link href="http://www.greyprint.co.uk/modules/external/lettering/css/letter.css" type="text/css" rel="stylesheet">
<style type="text/css">
<input id="urlpath" type="hidden" value="http://www.greyprint.co.uk" name="urlpath">
<input id="imgfile" type="hidden" value="" name="imgfile">
<form id="addproduct" class="addForm" method="post" action="http://www.greyprint.co.uk/index.php?_a=letter">
<input id="prod_id" type="hidden" value="" name="prod_id">
<div id="designform">
<div class="tk">
<div id="settings">
<div id="designerleftcolumn">
<div id="designer_enter_text">
<div id="designer_select_font">
<div id="designer_select_colour">

Which leads me to think that this is the file where I should find what you want me to change !

 

if I search 'Letter.css' for:

 

<div id="settings">

 

it's not there !

[bsmither]

It is this:

#settings
{
  background:#F0F7FF !important;
  height:350px;
}

 

<div id="settings"> is HTML code, not CSS code.

 

A CSS rule starts with nothing, a period, or a hash.

settings { } would be properties assigned to every one of that HTML tag, such as <settings></settings>

.settings { } would be properties assigned to any HTML tag having that CLASS, such as <div class="settings"></div>

#settings { } would be properties assigned to that one specific HTML tag having that ID, such as <div id="settings"></div>

[Nik Grey]

Like this?

#settings
	<div id="settings" class="clearfix" >
	{
	background:#F0F7FF !important;
	//height:350px;
	}

[bsmither]

No. But good on you for the effort to try!

[bsmither]

The lettering page template is at: /modules/external/lettering/skin/inline.php, and the statement we are wanting is near line 157:

Was:
<div id="settings">
Now:
<div id="settings" class="clearfix">

In CSS code, making a comment is done this way:

#settings
{
  background:#F0F7FF !important;
 /* height:350px; */
}

[Nik Grey]

Outstanding, I feel slightly cheated though (and silly) as the 'Lettering Template' has an unusual name !

 

That's great, now I need to (I think) make the #designerleftcolumn a bit wider.. hmm, just did that by adding another 100px but this didn't solve my next problem !

 

The 'View Font Styles' text doesn't line up and the radio buttons underneath also don't line up as expected

 

I could also do with another 30px of the Blue background at the bottom but I don't want to complicate things !

[Nik Grey]

Is there a way I can stop that blue area, and the text preview field popping out of the right side of the theme template ?

I'm sure I wont be able to get the preview text to resize depending on screen size and I dont expect to be able to do that.

[bsmither]

In post #2, we discussed #designform is 1070px (letter.css, line 57). Make the width:auto;

 

Also, #text (letter.css, line 160), make the width:auto;

 

With width at auto, the width of the container will be as wide as it needs to be, or as wide as can fit inside it's parent's container, as well as being centered in that container.

[Nik Grey]

Sorry for the delay, I am not only moving office but re-decorating at the same time.

 

I just had a 'Scare' - I navigated to my website just to see a white page with 'Fusion Required' at the top !

 

I thought that as a result of my last message to Shopdev, which was factual and succinct .. I thought they had turned me off !

 

Could this happen, is the mere fact of my electing to use a 'Premium Theme' opening me up to being at the Mercy of someone else ?

 

I just made the changes Brian (as above - thank you) and everything is looking great as far as that goes with the Tool but..

 

Can we get the other bits corrected as outlined in Post 11 ?

 

pretty please

[bsmither]

"Could this happen, is the mere fact of my electing to use a 'Premium Theme' opening me up to being at the Mercy of someone else ?"

 

If anything is not "human-readable", such as CubeCart's encoded files, Fusion's encoded files, whatever, means you simply do not know what is going on inside.

 

We know that CubeCart's encoded files do several things, one in particular is to check on the license.

 

Whatever may be in Fusion, I don't know.

 

Let's get Firebug looking at your site. Enable the Inspector tool, and click on the word Bold under the Select Font selector. Firebug shows us that the <label> tag is being affected by two sources: style.less line 593, and letter.css line 1. It's Vector's label rule that is messing things up.

 

Note to add-on developers: if you have CSS styles in your skin templates, make sure you give them a unique class. To make your <label> tags behave the way you need them to be, give all your <label> tags a class="lettering_tool_designer".

 

(Things would go a lot smoother if the skin could turn off the LESS feature. The LESS feature gathers up all the skin's CSS files, crunches them to remove almost all white space, concatenates all the files into one single file, and delivers that one file to the browser. Thus, you don't really know what CSS file the rule at line 593 came from. But, oh well.)

 

Luckily, the rules of CSS files are such that a later CSS file brought in by the browser takes precedence over earlier files (with exceptions). style.less came in first, followed by letter.css. So the label rule in letter.css takes precedence.

 

What we need to do is force the <label> tags to not display as block, but rather to display as inline. So, within the label rule, add this property:

display: inline;

 

Use the Inspector tool to find the HTML and CSS for the phrase "View font styles". You will see it is a link contained in an unnamed div with a style attribute. That style has a fixed width of 300px. You have two choices: adjust the style in the HTML file, or name that <div> and add it to the letter.css file. Let's name the <div>.

 

Knowing that this skin file is: /modules/external/lettering/skin/inline.php, find that line of code (line 170). Make this edit:

Was:
<div style="width:300px;height:30px;">
Now:
<div id="designer_view_font_link">

In letter.css, add this (anywhere):

#designer_view_font_link {
  width:360px;
  height:30px;
}

A width of 360 seems good.

 

More could be done to the HTML to make the code more 'readable'.

[Nik Grey]

That's outstanding Brian - thanks so much.

 

Easy to follow instructions as ever