13 replies [Last post]
KayleighOcean
Offline
newbie
Last seen: 16 years 18 weeks ago
Joined: 2006-05-29
Posts: 6
Points: 0

Hi there,

I'm new to CSS, decided to start using it on my new site but needing a little help here and there...

At the moment, my main problem is that I want to create user preference layouts with different style sheets, which I understand up to a certain point. However, the site I'm making is a movie fansite and I wanted each SS to reflect a certain character, so a user can choose their favourite character and have the layout themed to that charcter.

Where I'm stuck is that I want to change the images in my heading banner and navigation menu with each SS, how can I do that??

I hope I've been clear enough, I might have rambled a little.. :roll:

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 10 years 1 week ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

CSS User preference layout with image

Make those images background images.

KayleighOcean
Offline
newbie
Last seen: 16 years 18 weeks ago
Joined: 2006-05-29
Posts: 6
Points: 0

CSS User preference layout with image

Chris..S wrote:
Make those images background images.


Thanks for your suggestion, but I am still a little stuck.

For reference, my site's current URL is http://oceansonline.net

I currently use an external SS on all pages, the content of my current SS is as follows:

BODY{background-color:#FFFFFF; color:#CC0099; font-family:serif; font-size:small; font-weight:lighter; }
FONT{color:#CC0099; font-size:small; font-family:serif; background-color:#CCCCCC; font-weight:lighter; text-decoration:none; }
DIV{ border-color:#CC0099; border-style:dotted; border-width:thin; }
SPAN{ border-color:#CC0099; border-style:dotted; border-width:thin; }
A{color:#CC0099; text-decoration:underline; }
A:Visited{color:#6666FF; text-decoration:line-through; }
A:Hover{color:#990099; }
INPUT{font-family:monospace; font-size:medium; color:#99CCFF; border-style:double; border-width:medium; border-color:#6699FF;}
SELECT{font-family:monospace; font-size:medium; border-color:#FFFFFF; }
OPTION{font-family:monospace; font-size:medium; border-color:#6699FF; }
TEXTAREA{font-family:monospace; font-size:medium; border-color:#6699FF; }
H1{color:#CC0099; background-color:#CCCCCC; font-size:large; font-family:serif; font-weight:bolder; text-decoration:underline; }


The main content of the site is located in an iframe within the index page. When it's set up, hopefully a user can 'change their charcter' so that the banner changes, as does the colour of text etc on all pages where the external css file is used.

If I were to use the changable banner as a background image would it be possible to achieve this so as it only shows on the index page - and not on all the other pages where the SS is used within the iframe.

I dabled with the idea of using a seperate set of CSSs for the index page, but then when a user changes the SS, the text colours etc in the iframe wouldn't change would they?

I hope someone understands me :? I only semi-understand myself, but that's the story of my life.

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 10 years 1 week ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

CSS User preference layout with image

You should be able to. Use an id on the index page and don't use that id on the other pages. Set the background on a style rule using the id.

iframes aren't the best way to build sites. Try doing what you are doing with whole pages.

KayleighOcean
Offline
newbie
Last seen: 16 years 18 weeks ago
Joined: 2006-05-29
Posts: 6
Points: 0

CSS User preference layout with image

Chris..S wrote:
You should be able to. Use an id on the index page and don't use that id on the other pages. Set the background on a style rule using the id.

iframes aren't the best way to build sites. Try doing what you are doing with whole pages.

What's an ID? Is there a tutorial on it on this site?

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 38 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

CSS User preference layout with image

KayleighOcean wrote:


What's an ID? Is there a tutorial on it on this site?


Yes! have a hunt around they haven't been hidden that well Smile

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

thepineapplehead
thepineapplehead's picture
Offline
Moderator
Last seen: 22 weeks 4 days ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9683
Points: 819

CSS User preference layout with image

Yes, funnily enough in the How To section Tongue

http://www.csscreator.com/css-forum/ftopic9412.html

Verschwindende wrote:
  • CSS doesn't make pies

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 38 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

CSS User preference layout with image

](*,)

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

thepineapplehead
thepineapplehead's picture
Offline
Moderator
Last seen: 22 weeks 4 days ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9683
Points: 819

CSS User preference layout with image

/note to self: must stop Hugo cross-posting with everyone else Tongue

Verschwindende wrote:
  • CSS doesn't make pies

KayleighOcean
Offline
newbie
Last seen: 16 years 18 weeks ago
Joined: 2006-05-29
Posts: 6
Points: 0

CSS User preference layout with image

Thanks for that guys, I've have a look and play around with it a bit.

KayleighOcean
Offline
newbie
Last seen: 16 years 18 weeks ago
Joined: 2006-05-29
Posts: 6
Points: 0

CSS User preference layout with image

Mmmm no it's not working Crying

larmyia
Offline
Elder
London
Last seen: 14 years 2 weeks ago
London
Timezone: GMT+1
Joined: 2005-01-25
Posts: 1060
Points: 0

CSS User preference layout with image

KO to be honest it looks like you're trying to run before you can walk. You have no doctype...what's the point of having an external stylesheet and then putting all these styles inline? Put everything externally (unless you have a very good reason for not doing so..which I don't think you do)...

furthermore your html....well I think you'll find some of your elements are depreciated and it's not really semantic.

get your page working well.

then go that step further and add different styles for different users.

IMHO.

larmyia

KayleighOcean
Offline
newbie
Last seen: 16 years 18 weeks ago
Joined: 2006-05-29
Posts: 6
Points: 0

CSS User preference layout with image

larmyia wrote:
KO to be honest it looks like you're trying to run before you can walk. You have no doctype...what's the point of having an external stylesheet and then putting all these styles inline? Put everything externally (unless you have a very good reason for not doing so..which I don't think you do)...

larmyia

I'm sorry, but I don't understand you here - all my SS are external.

By the way, the website is now viweable at..

http://www.oceansonline.net

larmyia
Offline
Elder
London
Last seen: 14 years 2 weeks ago
London
Timezone: GMT+1
Joined: 2005-01-25
Posts: 1060
Points: 0

CSS User preference layout with image

KayleighOcean wrote:

I'm sorry, but I don't understand you here - all my SS are external.

erm no they are not....(not in code view so you can see what I'm talking about)

<body background="http://www.grsites.com/textures/lblue/lblue110.gif">
<br><center><img src="layout.jpg" usemap="#layout" alt="" style="border-style:none" />
<SNIP>

<div style="position:absolute;left:350;top:200;"><iframe src="o11news2.html" height="300" width="475" name="window"></iframe></div>

to name not all...

and you still have no doctype

as for your use of <centre> check out http://www.w3schools.com/tags/tag_center.asp