[Solved] I use <p> <span> and <br /> in my markup

For discussion and questions related to CMS Specific templates and stylesheets (CSS), and themes. or layout issues. This is not a place for generic "I don't know CSS issues"
rayh
Forum Members
Forum Members
Posts: 37
Joined: Sat Jul 19, 2008 4:20 pm

[Solved] I use <p> <span> and <br /> in my markup

Post by rayh »

Hi - I'm investigating using CMSMS - I like what I see but am having trouble visualising how to 'transfer' exisiting sites to using CMSMS.
I have uploaded the latest version of CMSMS and got it working - a few hick-ups but sort of understand that side now. My problem is more to do with HTML and layout translation ideas.

I write my pages using loads of paragraphs - often restrained sizewise (CSS) and within them spans for particular emphasis (CSS) and line breaks and so on.

I cannot see how to replace these 'blocks' using the CMSMS content tags.

For example I use then maybe a and a This creates a block of reuseable code and I use the idea constantly within my HTML / CSS designs. I use such blocks to hold images like within a gallery, or 'buy details for a product - clicking to javascript - and so on.

As said at the beginning I am not visualising how to use your content markers etc to imitate' my style of writing pages. Is anybody willing to help a decrepid old html / css timer to transfer to this wonderful modern and useful method of 'site management' ideals?   

Thanks
Last edited by Anonymous on Tue Jul 29, 2008 3:24 pm, edited 1 time in total.
jmcgin51
Power Poster
Power Poster
Posts: 1899
Joined: Mon Jun 12, 2006 9:02 pm

Re: I use <p> <span> and <br /> in my markup

Post by jmcgin51 »

CMSMS separates content from style (or at least that's the way it's intended to be used).  Style is determined by the stylesheets, of which one or more may be applied to any template.  Content is all that needs to be included on the page itself.

So, to use your example as an example, you would create a stylesheet (or edit an existing stylesheet) as follows:

p.normal {add paragraph fomatting here}
img.standard {add image formatting here}
span.typical {add span formatting here}


Then in your page, all you need to do is paste your text and the relevant HTML tag, but no formatting, i.e.:

blah blah blahcaption text

If you ever decide to change the look of your site (for example, change the size of all your fonts, you only need to make one change in the stylesheet, and all the pages will reflect that change automatically.
User avatar
Dr.CSS
Moderator
Moderator
Posts: 12711
Joined: Thu Mar 09, 2006 5:32 am

Re: I use <p> <span> and <br /> in my markup

Post by Dr.CSS »

Where ever you have your block of code,
etc. you put a {content} tag then for more places to put content {content block="content2"}...

After you do a default/standard install if you read all the pages/content that comes with it you will gain a better understanding of how it all works...
rayh
Forum Members
Forum Members
Posts: 37
Joined: Sat Jul 19, 2008 4:20 pm

Re: I use <p> <span> and <br /> in my markup

Post by rayh »

Thank you.

I know about use of css and all that and thanks for the answer - I want to visualise how to translate etc  into cms talk.

It is the
's that I am more worried about because the editors allow the user to 'insert lines' and I'm not sure for what I want that I want them to be able to do that within certain parts of the page design.

In text blocks and so on fine but not where I've already 'laid' it out. I will experiment with the {content} tags = did do that last night and it just allowed me to put anything in I wanted - basically - unrestrained -. While I can limit sizes through CSS I can 'see' problems. My experiments last night did not enter into the paragraph {content block='para1'} but added the text beneath the para. I'll try again.

Thanks
User avatar
Dr.CSS
Moderator
Moderator
Posts: 12711
Joined: Thu Mar 09, 2006 5:32 am

Re: I use <p> <span> and <br /> in my markup

Post by Dr.CSS »

When you add a {content block='para1'} then go to edit the page, Content » Pages » click name of page, you will get an edit box, like Content:, called Para1: and this is where you add the content, paragraphs etc.,...

If you already have the info formatted:

some text bla bla bla text bla bla bla more text bla bla bla
more bla bla bla

Then you can hit the tick box, Turn WYSIWYG on/off, at the bottom and paste your preformatted text/info and then submit...

If you want to make the break, hitting return key on keyboard, not make another   but a
then it can be set in tinyMCE admin section...
rayh
Forum Members
Forum Members
Posts: 37
Joined: Sat Jul 19, 2008 4:20 pm

Re: I use <p> <span> and <br /> in my markup

Post by rayh »

Hi
Thanks for reply - I am experimenting - I set up {content block ='leftSide'} yesterday and added text through the content - page etc.

Today I've added {content block='para1' above a with a class. Then another {content block ='para2'} below that. These content blocks do not show up in the editor only the original {content leftside}.

If the text I enter does not 'sit' withiin the 'para's' for which I have set CSS formats then the CSS formats will not work - and I dont understand why the new lot of content blocks do not show within the editor.

Is there an example somewhere that I can look at. I've studied your 'documentation' on this til I'm blue in the face and the preset templates seem to work on the basis of {content} which is not what I am after. I need for some layouts more control over positioning etc - but none of that is relaevent if the 'new {content blocks='para1'} and so on do not show in the editor and if I cannot link the {content blocks='para1'} with the CSS formats.

Am I wasting my time?

Thanks
rayh
Forum Members
Forum Members
Posts: 37
Joined: Sat Jul 19, 2008 4:20 pm

Re: I use <p> <span> and <br /> in my markup

Post by rayh »

Again.

I see what you mean by WYSIWYG - turned that off and it showed 3 paragraphs so I added a class="para1" to the first para. This para should have a text colour formated and float right. Although I have linked the style sheet and in theory it works in so much as my header is how it should be - this para1 does not 'pick up' the CSS formats. THe font colour and size are wrong and it does not float to the right. THe HTML from which all this was extracted functions fine. I really do not understand what is happening here. Can I not float stuff in this system? and why is the class attributes not being applied? Images which have float CSS attributes applied on the page also do not float?????.

Someone out there must have a design which is 'not just a cube of text' which the user can formate and with a nav to the left.

To be hionest I've seen a site using this system and that is all they seem to get  - a strip of images with text underneath - I want to float things and position things better than that - then once set I want a user to be able to change the text within 'those' contrained' areas and to swop the images but I want the images to continue to be where I placed them - I am blank on how this can be achieved? Can it Be. Are there examples?

Thanks
rayh
Forum Members
Forum Members
Posts: 37
Joined: Sat Jul 19, 2008 4:20 pm

Re: I use <p> <span> and <br /> in my markup

Post by rayh »

Hi All

Thank you for all your help. Yes if I click off WYSIWYG I can see the created - Yes, thanks if I then apply a class name to the para and 'apply' then that will display with the attributes. Thanks - question - million dollar one - is there a way to 'force' the system to apply a class to a para created within the editor?? OR?

Can CSS styles be applied to a {content block='para1'} ????? - that would be brilliant. It would then give me the beginnings of what I want - next would be to find a way to prevent the user from 'adding' new lines within certain blocks and then we will be done.

Fingers crossed that someone is reading this and come back and say yes here's how. Thanks you all so far for helping - please don't stop.  Ta

R
calguy1000
Support Guru
Support Guru
Posts: 8169
Joined: Tue Oct 19, 2004 6:44 pm

Re: I use <p> <span> and <br /> in my markup

Post by calguy1000 »

Howbout {content block="something"}

Then you could simply style things for inside that id.  i.e:

#blah p { color: #ff0000; }

Then restrict the wysiwyg editor so your customers only have a few styles available, a few buttons and only a few tags.
Follow me on twitter
Please post system information from "Extensions >> System Information" (there is a bbcode option) on all posts asking for assistance.
--------------------
If you can't bother explaining your problem well, you shouldn't expect much in the way of assistance.
rayh
Forum Members
Forum Members
Posts: 37
Joined: Sat Jul 19, 2008 4:20 pm

Re: I use <p> <span> and <br /> in my markup

Post by rayh »

:D

Hi calguy - thanks for that - I've sort of started to think along thise lines and this is what I have done (need to understand the let user apply only certain styles but getting there) what I did in the css file was to automatically hide all paragraphs and set height to 0, margin:0, padding:0 - then paragraphs with a style applied (thats where you bit comes in) has the visisbility set to visible.

Whe nthe user 'hits' the return key a para is entered nut does not show in the scheme of things ie it is a completely empty element regardless of what is typed in it - this might not be ideal but a few attempts from a user to 'add para's will come to nothing and they will be trained??

I did look at the Tiny to see if I could turn off paras but could not see how so gave thay up plus I want them to beable maybe to add new but with the predefined para format for the part of the page they are editing. THat woun't help much with a shopping type 'para set up so might have to re--think my CSS writing style but at least there is a way to limit 'some type's of input

Now all I've got to do is understand the apply style bit because what I did was to switch off WYSIWYG and typed in the class name

Thanks for advice - it's nice to know that 'we' dont suffer alone!

R
User avatar
Dr.CSS
Moderator
Moderator
Posts: 12711
Joined: Thu Mar 09, 2006 5:32 am

Re: I use <p> <span> and <br /> in my markup

Post by Dr.CSS »

Do you mind showing what you are starting with that is to be converted to CMSMS, like a rendered page or in your case the html with content in it?...
rayh
Forum Members
Forum Members
Posts: 37
Joined: Sat Jul 19, 2008 4:20 pm

Re: I use <p> <span> and <br /> in my markup

Post by rayh »

Hi

try these - the to buy page has not been launched yet and is a work in progress - I might convert that to  cubeCart?

try these simple sites - (I apol in advance as they are only 'simple) - please dont judge too harshly - still learning

www.fairytalefalabellas.co.uk - one of the for sale on the left of the page will take you to a horses details - this has been put together so that there is a certain 'set foprmate' so that bothe the visitor knows where to 'find' what information thet want and the idea is that the person updating knows where to put data.

www.equisign.co.uk

They want to be alble to update all of this site themselves - some should be straight forward but the 'design and buy I can't see how and so on.

this is the site which will have a gift page added - it is wrtitten - 7 styles of clothing which when clicked displays sizes and colours relevant to the product  and allows the user to input a slogan to have printed on and siplays a 'mock-up of what it will look like slogan and clolour -- then when they click buy it will produce an email to the supplier with all the details on etc.
User avatar
Dr.CSS
Moderator
Moderator
Posts: 12711
Joined: Thu Mar 09, 2006 5:32 am

Re: I use <p> <span> and <br /> in my markup

Post by Dr.CSS »

Most of what you have is p with a class, if your style sheet has a class in it then the style drop down in tiny will let them add the class to any word in the text...
rayh
Forum Members
Forum Members
Posts: 37
Joined: Sat Jul 19, 2008 4:20 pm

Re: I use <p> <span> and <br /> in my markup

Post by rayh »

Hi Mark

Thank you for your patience and understanding

I notice you 'politely' said little about the sites! That bad Ha! (early days)

You are right of curse regarding tiny.

My worry was that basically they could apply the wrong style in the wrong place with a 'disastrous visual' result.

My designs aren't breathtaking or anything but I do tend to try to give my few clients a look that they have signified they want and try to get as many elements to match etc.

My 'fear' is that while you can give then the tools and the tuition at the end of the day they will be able to competley change what might have been a fair looking balanced site into something very hotch potch.

So I was (am) looking for a way to enable to add / change things while retianing the overall appearance. Yes, I can put styles in and ask them to select them in certain areas - but who knows what might happen - and my worry is 'our name' appears on the site and if it becomes a visual 'blot' them our name is blackened. 

I was hoping to retain a certain control. I suppose that I could put something site originally designed by xxxx, new line - updated by the client (using CMSms?).

I have been playing with tiny all day and kind of understand it - it does not function well when applying para and styles - it kept trying to nest paras which is wrong and worrying - I clicked tidy HTML but the nested remained - hiding the content - so my clients are going to have be very careful and I can see that I will have to 'quietly keep looking into the background coding of things but can't see how I can say to a client - who doesn't want to pay maintenance -  I am spending xx amount of time on their site each month because they wont appreciate why; so guess I would have to leave it with the nag that having 'produced' something in a certain way I would like to see it 'develop' nicely not ramshackled, while at the same time I really want the client to have control. I've rambled. Sorry.

I will play more and I'm sure my clients will hold their hands up in glee - lot of re-writing to do though!

Regards

Tanks again.
User avatar
Dr.CSS
Moderator
Moderator
Posts: 12711
Joined: Thu Mar 09, 2006 5:32 am

Re: I use <p> <span> and <br /> in my markup

Post by Dr.CSS »

Well one way to help them is to name the classes very explicitly, may make for some long class names but maybe they will catch on...

No I don't criticize a design, hey the customer gets what they want right, only point out if it has rendering problems, like in Firefox, not checked in IE, the left side text, "Blue Pony Farm is situated in the heart of the Lincolnshire Wolds etc.", the box is broken in 2 and the top sits off to the right...
Post Reply

Return to “Layout and Design (CSS & HTML)”