How to add a page with its own css style

[.::MDT::.]

Offline

Posts: 17

« on: April 09, 2008, 04:01:19 PM »

Hi, I would like to add a html page (http://www.trentoasa.it/temp/membri.html) I did with its own css style (inserted in the <head> section) in my website baker site, but:

if I insert it like a CODE page, nothing is displayed (it is html code, should it be PHP?)
if I insert it like a WYSIWYG page, it works, but when I try to modify it (opening it in the backend editor) and then I save it, the css style is no more saved, so I lose my style!

How should I do to simply add my page to my website baker site and have the possibility to edit it in the backend (without losing every time the css style)?
Should I use a wrapper (I prefer not, because in this case I can't modify my page from the backend but I have to download it every time via FTP, modify it and then uploading it) or is there any plugin maybe?

Thanks for the attention.


	Logged

ruebenwurzel

WebsiteBaker Org e.V.

Offline

Offline

Posts: 7973

Re: How to add a page with its own css style

« Reply #1 on: April 09, 2008, 04:09:22 PM »

Hello,

please before posting read the help page evil

.

Thanks.

If you do this, you will find described how the code section works and how you have to use html code in it. wink

Also WYSIWYG section could be used, simply switch to source window and add there the whole html code.

Best would be, to add the css to your templates css and simply built the site in a WYSIWYG Section.

Matthias


	Logged

sorin negulescu

Offline

Posts: 7

Re: How to add a page with its own css style

« Reply #2 on: April 09, 2008, 04:15:27 PM »

Hi there,

I managed to do what you tried to do I and I have succeded. [I use FCKEditor].
I added a new WYSIWYG page and put this code in it:

Code:

<p><style type="text/css">

div#container {
width:500px;
border: 0px solid #ff9900;
margin:0 auto
}

.colonna1{
float: left;
width: 50%;
border: 0px solid #CCC;
margin-top: 10px;
/*background:#B1D4FF*/
}

.colonna2{
float:left;
display:inline;
width:50%;
border: 0px solid #CCC;
margin-top: 10px;
/*background: #FFC*/
}

img{
float:left;
margin-right: 10px;
border: 0px solid #FF9900
}
</style>

</p>
<div id="container">
<div class="colonna1"><img alt="" src="http://farm1.static.flickr.com/27/buddyicons/11102419@N00.jpg?1138969119#11102419@N00" /> Utente1 <br />
<a href="www.google.it">link</a></div>
<div class="colonna2"><img alt="" src="http://farm2.static.flickr.com/1411/buddyicons/27493347@N00.jpg?1192540443#27493347@N00" /> Utente1 <br />
<a href="www.google.it">link</a></div>
<div class="colonna1"><img alt="" src="http://farm1.static.flickr.com/27/buddyicons/11102419@N00.jpg?1138969119#11102419@N00" /> Utente1 <br />
<a href="www.google.it">link</a></div>
<div class="colonna2"><img alt="" src="http://farm2.static.flickr.com/1411/buddyicons/27493347@N00.jpg?1192540443#27493347@N00" /> Utente1 <br />
<a href="www.google.it">link</a></div>
<div class="colonna1"><img alt="" src="http://farm1.static.flickr.com/27/buddyicons/11102419@N00.jpg?1138969119#11102419@N00" /> Utente1 <br />
<a href="www.google.it">link</a></div>
<div class="colonna2"><img alt="" src="http://farm2.static.flickr.com/1411/buddyicons/27493347@N00.jpg?1192540443#27493347@N00" /> Utente1 <br />
<a href="www.google.it">link</a></div>
</div>

As you can see the css definition is included in <p>...</p> tags (FCKEditor added this automatically) and I guess it's not XHTML compilant but it works.


	Logged

[.::MDT::.]

Offline

Posts: 17

Re: How to add a page with its own css style

« Reply #3 on: April 09, 2008, 04:20:37 PM »

@ruebenwurzel: Yeah, thanks, I was almost sure that CODE section should be written in PHP... tongue

Referring to WYSIWYG pages, I know I have to switch to source windows, but the problem is here: I add my html page with css style in the source window, I save it and it's ok. But when I modify it, as I've just written, the css is no more saved!

@sorin negulescu: thanks, I will try to install FCKEditor now and see if it works! Wink


	Logged

Ruud

WebsiteBaker Org e.V.

Offline

Offline

Posts: 2298

Re: How to add a page with its own css style

« Reply #4 on: April 09, 2008, 04:44:41 PM »

What is it you want to realise?

If it is needed for using 2 or 3 different page layouts, you could just create 2 or 3 different templates and select the correct template for the page you want to display.

Ruud


	Logged

Professional WebsiteBaker Solutions

[.::MDT::.]

Offline

Posts: 17

Re: How to add a page with its own css style

« Reply #5 on: April 09, 2008, 04:47:49 PM »

Quote from: RuudE on April 09, 2008, 04:44:41 PM

No no, I simply want to add one page with its own style, but it isn't a template (I use this style only for this page).


	Logged

doc

Guest

Re: How to add a page with its own css style

« Reply #6 on: April 09, 2008, 06:03:13 PM »

Hello,

if you want to use some special CSS Definitions in the content area of one specific page, simply copy the CSS styles into the CSS file of your template (e.g. /templates/your_template/screen.css). If you want to give one single page a complete different design, simply create a template for this site and assign this page to the template, all other pages to a different template (Backend -> Pages -> Settings -> Template).

Christian


	Logged

[.::MDT::.]

Offline

Posts: 17

Re: How to add a page with its own css style

« Reply #7 on: April 09, 2008, 06:10:41 PM »

@sorin negulescu: thanks, it works great!

@doc: yeah, putting the css definition in the css template file is a solution (because we know that the css template file is always loaded), anyway I thought there was a better solution: load the css code I use for a single page in every page, even though when it's not used, isn't very good. Wink

At the moment I am using what soring negulescu advised, and it's ok.

Thank you all!


« Last Edit: April 10, 2008, 12:44:56 AM by [.::MDT::.] »	Logged

marathoner

Offline

Posts: 495

Re: How to add a page with its own css style

« Reply #8 on: April 09, 2008, 07:08:51 PM »

An alternative is to simply use a DIV wrapper. For example, you could wrap the one page in something like <div class="nostyle">insert page content here</div> and then create a class in your CSS to use the other styling.


	Logged

doc

Guest

Re: How to add a page with its own css style

« Reply #9 on: April 09, 2008, 07:20:41 PM »

Hello,

or you can add the following code into the index.php of your template:

Code:

<?php
if(PAGE_ID == 2) {
echo '<link href="' .TEMPLATE_DIR .'/specialpage.css" rel="stylesheet" type="text/css" media="screen" />';
}
?>

Set PAGE_ID == 2 to the page_id of the page you require the additional CSS definitions. The CSS definitions are stored in the file specialpage.css located in the folder of the choosen template.

Christian


	Logged

[.::MDT::.]

Offline

Posts: 17

Re: How to add a page with its own css style

« Reply #10 on: April 10, 2008, 12:44:26 AM »

@marathoner: thanks, but as I've just said, in this case the css is loaded for all the page, even though it isn't needed.

@doc: this last solution is really nice, never thought at it! I like it! Wink


	Logged

kweitzel

Forum administrator

Offline

Posts: 6977

Re: How to add a page with its own css style

« Reply #11 on: April 10, 2008, 09:10:10 AM »

You could actually spin that last solution a bit further to load a stylesheet when there is one available on pagelevel.

Code:

<?php
$stylesheet = TEMPLATE_DIR.'/screen'.PAGE_ID.'.css';

if(file_exists ($stylesheet") {
echo '<link href="' " rel="stylesheet" type="text/css" media="screen" />';
}
?>

Dazu musst Du dann nur ein Stylesheet mit dem zusammengesetzten Namen in das Template Dir reinladen. Wenn eine solche Datei gefunden wird (Besp: screen35.css fuer Page_ID 36) wird diese vom Browser geladen, ist die Datei nicht vorhanden, wird auch nichts geladen ...

Gruss

Klaus

PS: Code nicht getestet ...


	Logged

WebsiteBaker Org e.V. - for WebsiteBaker

Ruud

WebsiteBaker Org e.V.

Offline

Offline

Posts: 2298

Re: How to add a page with its own css style

« Reply #12 on: April 10, 2008, 07:22:10 PM »

Quote from: kweitzel on April 10, 2008, 09:10:10 AM

Dazu musst Du dann nur ein Stylesheet mit dem zusammengesetzten Namen in das Template Dir reinladen. Wenn eine solche Datei gefunden wird (Besp: screen35.css fuer Page_ID 35) wird diese vom Browser geladen, ist die Datei nicht vorhanden, wird auch nichts geladen ...

solve this by simply changing the snippet into

Code:

$stylesheet = TEMPLATE_DIR.'/screen'.PAGE_ID.'.css';

if(!file_exists ($stylesheet) {
$stylesheet = TEMPLATE_DIR.'/screendefault.css';
}
echo '<link href="'.$stylesheet.'" rel="stylesheet" type="text/css" media="screen" />';

now it will use the default if no custom css exists.

Ruud

Ps. Didn't test either ..


	Logged

Professional WebsiteBaker Solutions

kweitzel

Forum administrator

Offline

Posts: 6977

Re: How to add a page with its own css style

« Reply #13 on: April 10, 2008, 10:29:48 PM »

Sorry for posting in German above ... My Idea of this snippet was just to additionally load this CSS file containing "override definitions" or additional definitions for the standart css file ... but that's a way of doing it a well

grin

cheers

Klaus


	Logged

WebsiteBaker Org e.V. - for WebsiteBaker

Ruud

WebsiteBaker Org e.V.

Offline

Offline

Posts: 2298

Re: How to add a page with its own css style

« Reply #14 on: April 10, 2008, 10:36:39 PM »

Quote from: kweitzel on April 10, 2008, 10:29:48 PM

Sorry for posting in German above ... My Idea of this snippet was just to additionally load this CSS file containing "override definitions" or additional definitions for the standart css file

It has been something like 30 years since I had German lessons at school. I might have misunderstand the "wird auch nichts geladen ...".
(Don't tell my daughter who is learning German right now.)

Anyway, enough solutions for one problem.

Ruud


	Logged

Professional WebsiteBaker Solutions

Pages: [1] Go Up