|
CSS - Echo Custom Css Commands To Header.tpl With Php
Here is the default css.css file for a php directory I use >> http://www.phpmydirectory.com/demo/template/default/css.css
I want to create custom fields in user/listee admin that allow a user/listee to choose things like scrollbar colors, page colors, text sizes etc on their individual listing page. Each listing page has a header.tpl file w/ <head>/</head> section. Each .tpl file calls the default css.css file above. How can I echo new css fields into either the css.css file or the actual listing.php of the listing page itself? I got a suggestion to use this but I cannot make it work. Code: <? if (on_page('listing.php')) { ?> etcetcetc
I've tried maybe 10 different ways. No luck. Should I convert the css file to php file & echo custom fields into it & call the php/css file to the listing page header? Similar TutorialsI'm creating a box that should be able to be scaled by either setting the size of the element containing the box, or the box itself. Here is the HTML: html4strict Code: Original - html4strict Code <div id="container1"> <div id="panelBox1" class="panelbox"> <div class="header">My Panel Box</div> <div class="content"> <div>Content for the panel box. Content for the panel box. Content for the panel box. Content for the panel box. Content for the panel box. Content for the panel box. Content for the panel box. Content for the panel box Content for the panel box. Content for the panel box. Content for the panel box. Content for the panel box Content for the panel box. Content for the panel box. Content for the panel box. Content for the panel box Content for the panel box. Content for the panel box. Content for the panel box. Content for the panel box Content for the panel box. Content for the panel box. Content for the panel box</div> </div> </div>
The CSS: css Code: Original - css Code div.panelbox { background: transparent url("Styles/Default/Images/panel_box_head_left.gif") no-repeat left top; padding: 0px; margin: 0px; } div.panelbox div.header { background: transparent url("Styles/Default/Images/panel_box_head_right.gif") no-repeat right top; line-height: 24px; margin-left: 3px; font-size: 0.8em; font-weight: bold; padding: 0px; } div.panelbox div.content { border: solid 1px #b3b3b3; margin: 0px; padding: 2px; height: 100%; } div.panelbox div.content div { width: 100%; height: 100%; overflow: auto; } #panelBox1 { height: 100%; }
The content element should take up the remaining space left by the the header. How can I ensure that the height of the content is 100% of the box minus the height of the header? Thanks for taking the time to read my question. I have one div within several larger div's (one box inside several larger boxes) The larger boxes have certain formats on them. I don't want any of them to apply to the small box in question. How do I clear all of the previous commands? Page in question: This is what it looks like now. I want to change the tree structure at the bottom (Past Pierced Shows) www.pierced.ca/pierced-events.htm What it should look like (Not color, just layout) www.pierced.ca/NoName.html Thanks for your help. Brad Hi, I have recently started learning CSS by myself, so am at the beginners level. I have been trying to put together a friend's site and now stuck with a Firefox problem. I think my Firefox is not recognising the CSS div commands, but it's great to see that Safari & Google Chrome is being nice. As I am a new user in this forum, it's not allowing me to post any links, so if there is anyone to help, I can forward you the site link at your email or if there is any other way to see the difference on Firefox & Google Chrome. Many thanks in advance! Hi all, I'm trying to create a simple menu with rollover links using CSS, but while it works in IE, it stops as soon as the link text ends in Firefox. Is this because Friefox is ignoring the width and heigh commands in CSS? And is there any way to fix this? If so, how? I've got this working on Firefox Code:
.menu_item {
}
.menu_item a:link{
width: 163px;
height: 21px;
padding-top: 4px;
padding-left: 20px;
background-image: url(menu_rollover_0.gif);
background-repeat: no-repeat;
color: #6A7182;
text-decoration: none;
}
.menu_item a:active{
width: 163px;
height: 21px;
padding-top: 4px;
padding-left: 20px;
background-image: url(menu_rollover_0.gif);
background-repeat: no-repeat;
color: #6A7182;
text-decoration: none;
}
.menu_item a:visited{
width: 163px;
height: 21px;
padding-top: 4px;
padding-left: 20px;
background-image: url(menu_rollover_0.gif);
background-repeat: no-repeat;
color: #6A7182;
text-decoration: none;
}
.menu_item a:hover{
width: 163px;
height: 21px;
padding-top: 4px;
padding-left: 20px;
background-image: url(menu_rollover_1.gif);
background-repeat: no-repeat;
color: #ED1C2D;
text-decoration: none;
}
Cheers. Hi all, I need some help. I have implemented a fixed header on my site, but certain content is scrolling above the header while other is scrolling behind. I would like it all to scroll behind the fixed div's. Hi, I'm trying to make my own custom CSS for Internet Explorer to load when I visit the www.tv.com site. How do I go about making it domain specific? Is there an IE alternative to Firefox's @-moz-document domain("tv.com") method? I am new to coding so dont make fun of me or anything if this is stupid.. I'm coding my own tumblr right now, and it looks pretty good so far. I just dont know the code to make an image 'static' and stay at the top. If you take a look (hockey-lax-bro.tumblr.com/) you will see what i mean. The follow button and picture on the right 'follow' you wherever you scroll. Code: <div style="position:right;5px:top;25px">
<a href="https;||twitter.***/J_Harris012" class="twitter-follow-button" data-show-count="false" data-size="large" data-show-screen-name="false">Follow @J_Harris012</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.***/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</div>
<div style="position:right;30px:top;55px">
<a href="http;||i42.tinypic.***/2ai0etj.***" target="_blank">
<img class="normal" src="http;||i46.tinypic.***/15o8nj9.***" alt="install theme" />
</a>
</div>
Thats the coding that i have right now ^^ (i had to change a few things because new members are not allowed to post links) what do i need to change to make the buttons stay at the top? I have a question. If i create a custom class : p.q {color: black !important;} and a user has a css with the fallowing code: p {color: red !important;} will my text <p class="q">My text</p> be red or black and how can i prevent the user css from overriding my css Ive seen some sites using fonts i dont have on my computer how is this done and whats it called ? any help would be great. Hello, I'm working on converting my current table layout into strictly a CSS Layout . I've managed to get everything (layout wise at least...) displaying properly except for my right border. This is a small 30px x 1px drop shadow. I've been working with it for a few hours now, and I can't seem to get the image to even show up. Here is my CSS code: Code:
#container {
background-color: #726554;
width: 791px;
text-align: left;
margin: 0 auto;
}
#top {
position: absolute;
top: 0px;
left: 0px;
width: 791px;
height: 145px;
vertical-align: top;
}
#content {
background: #726554 url(PHP/img/right.jpg) right repeat-y;
margin-top: 30px;
width: 496px;
text-align: left;
vertical-align: top;
float: left;
}
#content p {
color: #f1f1f1;
font-family: Tahoma;
font-size: 13px;
margin: 0 0 10px 12px;
}
#content .date {
display: block;
color: #ff9100;
font-family: Tahoma;
font-size: 13px;
font-weight: bold;
}
#left {
vertical-align: top;
float: left;
width: 265px;
height: 671px;
}
#contact {
clear: both;
background: #726554 url(PHP/img/right.jpg) right repeat-y;
font-size: 13px;
font-family: Tahoma;
text-align: center;
}
I don't think you'll need any HTML code for this problem, but let me know if you do! Thanks in advance, Jason I was wondering if there was a way to have a chapter listing in a OL or UL. I want to be able to have "Chapter <i>:" as the list style where <i> is the increment. is this possible. I thought I saw that somewhere floating around, but i can't seem to find it. thanks in advance. I'm making a site, and the guy I'm making it for says he wanted a more 'tough' font. So I downloaded a, 'tough' but still readable of course, font. The main page has an iframe, and the content in the iframe is where the text goes that has the tough font. Everything works when it's offline. But when I try uploading it, it's the old font. I even check the source and it's all old. The server is running extremely slow right now, so that might be the problem and it just hasn't uploaded yet or something. Because I also deleted the content files and refreshed the page and it was still old. So, I'll wait a little longer and check or something. I also know that viewers can't see custom fonts if they don't have them on their pc. So this is kind of seeming pretty pointless. But is there ANYWAY I Can make it viewable to everyone that views the site. So they can see the font even if they don't have it on their pc. Like, make them have it temporarily or something. My friend told me it had something to do with CSS, but I don't really know. Anything I can do to make it work? Is there maybe a Java Script I can use? Can I use custom fields in IE or not? This is the complete example page I'm working with: Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="http://localhost:9080/garage68/">
<title>TestCSS</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<style type="text/css">
<!--
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 12pt;
color: #00FF00;
background-color: black;
}
.content {
position:absolute;
width:75%;
margin:5px 0px 0px 165px;
border:0px;
line-height: 20px;
z-index:3;
}
fieldset {
border: #26a solid 1px;
width: 85%;
margin-bottom: 5px;
}
header {
font-weight: bolder;
color: blue;
}
date {
font-weight: bolder;
color: red;
}
-->
</style>
</head>
<body>
<version>version: 3.1.0</version>
<div class="content">
<fieldset>
<date>2004-05-04</date>
<hr />
<header>Title1</header>
And Entry
</fieldset>
<fieldset>
<date>2004-01-21</date>
<hr />
<header>Title 2</header>
A Second Entry
</fieldset>
</div>
</body>
</html>
You'll see the difference taking a look at it in IE versus Firefox. It seems like it's picking up some things (even from the custom tags) but leaves off other things. How can I get these two pages to look the same (as in both look like the firefox version)? Is it possible to specify a custom image for a border style? to start: this is my first post and i hope this forum is as helpful as the others i am a member of.. i have a basic text game i am working on and code is already layed out for me.. but i am looking to give the game my own style.. i have created the look i want in photoshop and sliced and sent over to dreamweaver but i am a noob and dont know how to get the things functioning.. at all pretty much everything can be set as the background except for the form but i want the blue gradient in input fields and images as buttons. i would like to have big font size in boxes and also have white letters.. also i want the whole centered x and y when viewer goes to page like i said: im a noob and just getting back into the web dev stuff and am pretty rusty so if anyone can help me out i will be SOOOOOO thankful!!! here is the link to the jpg.. let me know if you need the psd but i have 2 or 3 dif fonts in it that are not common fonts Code: http://i951.photobucket.com/albums/ad353/zac_exuro/Untitled-1-2.jpg I've been wrapping my head around how to apply a border at the bottom of an image, using the following: .menupic:link { border-top: 0px solid #ffffff; border-right: 0px solid #ffffff; border-bottom: 0px solid #ffffff; border-left: 0px solid #ffffff; } .menupic:hover { border-top: 0px solid #ffffff; border-right: 0px solid #ffffff; border-bottom: 4px solid #ffffff; border-left: 0px solid #ffffff; } It works fine in Mozilla, but I just cannot get the hover to work in IE, unless the border is completely solid and 1px+ for all a: states (kinda defeats what I'm trying to do), and it also works if I add float:left/right (which also is no good, as that messes up my design). Anybody found a css work around this problem? I have a site, osake.garychus.com on which I am attempting to use a custom font called Lato. On MACS it is all messed up on the pages, on my 2nd laptop at home it shows up but in another font I believe. Am I doing something wrong? as seen in this forum when posting a message, i was wondering how they get it so that the title of a section appears inside the border? example: ------ Title here --------------------| | | | bit of content | | | | | ------------------------------------- Hello all, I've been over at ALA and I came across this nice example on custom Borders and Corners and I've been playing with it but I'm still too green to get the effect I want. Basicaly, I just want to get ride of the footer text section and allow the main body section to streach all the way into the footer. If I just delete the footer text, it leaves an offely large gap between the main content and the bottom of the 'box'. So, how would I go about editing this example to not include a footer section, but still retain the bottom of the 'box'? Thanks for any help! Cheers, Fozzy I am working on a project in which users will be able to sign up for a program, lets compare it to a myspace page... and they can customize the look and feel of that page to a very limited extent. What is the best way to have them choose colors of the page through CSS, have those changes be there always applied to their page and their page alone? I don't need help with the implementation, I currently have it to where users can choose from pre-built stylesheets and those are used, but how do you set it up to where what options they choose in the setup wizard are then creating a new stylesheet just for that user on the fly? Thanks a ton, SS |
|||||||