Changing CSS with Radio buttons

Questions and tutorials related to Cascading Style Sheets *all versions*

Moderators: macek, egami, gesf

visus
New php-forum User
New php-forum User
Posts: 3
Joined: Sat Aug 21, 2010 9:08 pm

Changing CSS with Radio buttons

Postby visus » Sat Aug 21, 2010 9:43 pm

Hi
I'm working on a project, where I need to change the CSS on the page with radio buttons. When I select the style what I want and click the submit button It needs to be able to refresh the same page but with the selected CSS. I have the four buttons and for them I have four different CSSs. I am trying to use a php file and switch statement.
I use external css:

Code: Select all

<link rel="stylesheet" type="text/css" href="<? stl.php?>" />

Here is the code for the form:

Code: Select all

<form method="post" action="stl.php">
   Dark:       <input type="radio" name="style" value="1"/> |
   Light:      <input type="radio" name="style" value="2" /> |
   Business:  <input type="radio" name="style" value="3" /> |
   Fancy:     <input type="radio" name="style" value="4" /> <hr />
   <center>
   <input type="submit" value="Change Style" />
   </center>
   </form>

For the stl.php file I don't have a lot.

Code: Select all

<?

  $stl = $_REQUEST['style'];

switch($stl)
{
case 1: 'need the code"  "css/style1.css";
break;
case 2: 'need the code'   "css/style2.css";
break;
case 3: need the code'      "css/style3.css";
break;
case 4:  "css/style4.css";
break;
}
?>

I was thinking of overwriting a file with the different CSSs but after that How I can refresh the page and I get the CSS what I want.
If you have any ideas or some code it will be very helpful.

Thank's in advance

Suhoij
New php-forum User
New php-forum User
Posts: 92
Joined: Tue Aug 17, 2010 2:00 am
Location: Ukraine Kharkov
Contact:

Re: Changing CSS with Radio buttons

Postby Suhoij » Sun Aug 22, 2010 2:58 am

Do you use any template engine? In your code you need only echo the css:

Code: Select all

<?

  $stl = $_REQUEST['style'];

switch($stl)
{
case 1: echo  "css/style1.css";
break;
case 2: echo  "css/style2.css";
break;
case 3: echo  "css/style3.css";
break;
case 4: echo "css/style4.css";
break;
}
?>

visus
New php-forum User
New php-forum User
Posts: 3
Joined: Sat Aug 21, 2010 9:08 pm

Re: Changing CSS with Radio buttons

Postby visus » Sun Aug 22, 2010 11:30 am

Hi Suhoij

I do not use any templates engines. I try the echo command before but i didn't work. When I submit it's show me blank page whit "css/style1.css" or other styles(2,3,4 indepents which radio button I select).

Thanks for the replay.

Suhoij
New php-forum User
New php-forum User
Posts: 92
Joined: Tue Aug 17, 2010 2:00 am
Location: Ukraine Kharkov
Contact:

Re: Changing CSS with Radio buttons

Postby Suhoij » Sun Aug 22, 2010 12:44 pm

Ok I see another thing - you must include the file here:

Code: Select all

<link rel="stylesheet" type="text/css" href="<?php include 'stl.php'; ?>" />


visus
New php-forum User
New php-forum User
Posts: 3
Joined: Sat Aug 21, 2010 9:08 pm

Re: Changing CSS with Radio buttons

Postby visus » Wed Aug 25, 2010 3:52 pm

Ok finally success.

Code: Select all

<link rel="stylesheet" type="text/css" href="stl.css" />


when you want to do the changes you need to over write "stl.css" file with the value of the new style(style1.css,style2.css and so on). Just use the copy in "need code"

Code: Select all

copy ("css/style1.css", "stl.css");
.

maggiee
New php-forum User
New php-forum User
Posts: 1
Joined: Mon Apr 25, 2011 11:22 pm

Re: Changing CSS with Radio buttons

Postby maggiee » Fri Apr 29, 2011 8:58 pm

What is the html code to reference a css file in a folder on my desktop? I am new to developing as this question is basic i think. I downloaded a css template and want to start building a website. However, I have no idea how to have this show when running my current project. The file is in a folder on my desktop. How do I use a css template and how do I reference the file so that when I run it it works. I am using Aptana Web...
_______________________________
market samurai ~ marketsamurai ~ marketsamurai.com

User avatar
WebOutGateway
New php-forum User
New php-forum User
Posts: 37
Joined: Mon Jun 13, 2011 9:25 pm
Location: Pasig City, Philippines
Contact:

Re: Changing CSS with Radio buttons

Postby WebOutGateway » Tue Aug 05, 2014 6:42 pm

Hi!

Try moving your downloaded folder in your project's folder. Find the .css file and link it to your web page/s by adding this inside your <head> section.

Code: Select all

<link rel="stylesheet" type="text/css" href="yourStyle.css">

The href will define your .css file.

I hope this helps. Thank you.


Return to “CSS”

Who is online

Users browsing this forum: No registered users and 1 guest