Posts filed under 'CSS Reaction'
I’d just like to say about the wordpress 2.6..whateverversion, that auto saving can be a little dis·con·cert·ing.
I was going to ramble on about backgrounds.
and resisting the psychologically unfit compulsive urge to put all your css in neat optimized columns.
Body backgrounds
Don’t quote me on this, but they are both there, and not there.
?Do i deliberately mean to be so mysterious.. Possibly.
The larger backgrounds when placed behind a containing div of set width don’t cause any horizontal scroll bars, and it makes me think i should test things to consider a theory.
But i might just hit publish and have a cup to tea.
November 12th, 2008
The html
<a href="your link" class="rollover">
The css
a.rollover {
display: block;
width: 520px;
height: 493px;
text-decoration: none;
background: url("evolvepics/RocketBlowerRoll.jpg"); }
a.rollover:hover {
background-position: 0 -493px; }
August 29th, 2008
Css | Cascading Style Sheets
My post changing font color with css is getting quite a few hits, but it assumes a certain level of knowledge.
So here I will show you how to set up your style sheet.
Create index
Save document with meta information as shown, as index with .htm as the file extension.
You have your index.htm
within the head section you find the meta information.
<head>
<title>MadLayout</title>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8" />
<meta name="author" content="Paul David Spencer" />
<meta name="description" content="What we do"/>
<meta name="keywords" content="Design, CSS, Standards."/>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
</body>
</html>
The highlighted part is where you need to make the link to the stylesheet.
I have called it style.css, but call it anything you will remember.
Create the stylesheet
Open your text editor and save empty page as style, (or whatever you chose) with .css as the extension, thus saving it as a css document.
Once saved you can check your link is working, by adding styles for the body of your index document.
body {
margin: 0;
padding: 0;
background-color:#8b0000; }
Place index.htm and style.css in the same directory, test index in browser, and if your page background colour changes accordingly you are set, Ha ha.
Related Posts
Css Layout
Css Popup
Css Change font colour
August 10th, 2008
To use as base for your customized design, and why?
This site is using the blix theme by Sebastian Schmieg.
I chose this theme a couple of years ago for my blog, primarily because it had a contact form built right into the structure.
I still have some issues understanding all the php, but can splice my css and html in there reasonably fluently now, and have got good functionality with the aid of various plugins. I am fairly sure Sebastian would have kittens if he could see how I have butchered his original code, but hey, it’s all part of the process.
So what about you bloggers out there novice and pro alike.
Code from scratch, ahh or use on of the many available themes.
You only have to take a look at the zen garden to appreciate what can be done just by manipulating the css.
So if you feel inclined just drop a comment in the box below, I’d love to hear your views.
June 29th, 2008
Where did that red text come from?
Oikofugic Design
From the cascading style sheet
You might need to set youeself a style sheet at this point
Formatting text using css, we all know the basics, for example how to change the colour of a h2 tag.
Use the property color.
h2 {color: red;} in a named value or below as a hex value
h2 {color: #dd0000;}
If you want to mix it up a little and change the color of one word within the text you can enclose it in a span tag and style accordingly.
<span class="green">Inserted words</span>
CSS
.green {color: green;}
Next time: We look at font-family, how your text is seen by the browser.
April 23rd, 2008
Today’s remarkable tunes:
Titties and beer Frank Zappa
Slow blues Hendrix
Masks Van der Graaf Generator
and also\
An interesting selection generated by the ghost of ZAPPPA baby.
Just a quick one before I retire for the night.
I have a design job, not going to go into details at this point, other than to say it has been a most enjoyable experience so far.
My client.. Seems strange referring to ‘him/her’ as such. We have had a meeting, chat, discussed goals, styles. I assured the ‘client that I could achieve what was required..
And never one to divert from set task, jumped in I did with a frothy splash reminiscent of how you might feel jumping into a hot tub after a long walk through a dry and sandy desert. Initially webdesign… Initially a quest.
To get to the point I have a nice design in my head, lots of good content. The site is partially rendered, all involved are happy, apart from that is my schizoid me-O. Everything works as it should, but from within the darkest recesses I know with a hint of javascript a dab of php a stroll into the programming cosmos.. (it is a vast space.) Things could be supA seXy. So as a make-shift artist where do you decide what you currently know will do as opposed to what you know could be done if indeed you had the necessary and diligently acquired skill base.
My example:
I have pics to be displayed as feature pics on a page, from a category holder.
When displayed pics need to hover, showing a before and after scenario. These pics are to be displayed either horizontally or vertically, and as such I require only the two page templates to render the images.
If images did nor require ‘on hover’ I could use a spot of javascript to change the image to be displayed without having to call a fresh page.
IE:
<script language="javascript">
function ChangeImage1(){
document.getElementById("image1")
.src= "location of the first thumbnail";
}</script>
I imagine I ought to be able to use php to insert image code into standard template, maybe I will suss it over the next few days. Any ideas?
Update
I got over the above situation by making lots of pages, but it wasn’t so bad.
I have almost finished the job now, will post links to it soon.
During the building process I have implemented a number of techniques that were known to me, but hadn’t got around to using. Basically I have been using the php include function to pull the various repeatable aspects of the pages together. For example the top section [header] and [footer] at the bottom can be called from a file written once, and stored safely not to be tampered with, giving the site a delightful continuity that can sometimes be lost if pages are built individually.
I received a few more images this evening to add to the site, and there is some tweaking to be done, behind the scenes tidy up. I am going to leave you with a pic from Lynseys’ portfolio, an example of the abstract and original content you will find in her site. Enjoy..
September 5th, 2007
Layout techniques using css. Cascading style sheets.
Over the next few weeks I am going to build an external working page (I will link to soon) with pictures, graphic images, text, navigation and anything else that pops into mind at any given time along the course of the project. In an effort to keep this blog going I will post in smallish segments, to enable me to write more frequently.
Disclaimer:
I have uncovered all I know from the web, and my own investigations. All tutorials are given in the understanding that information acquired here might in some cases not be the best solution to any possible hypothetical situation. Hold me not responsible for any psychiatric episodes you may experience on your personal quest to build a web site.
Enjoy:
The beginnings
Above is a div. It can be any size as specified by the style sheet or style rules.
html:
<div id="maincont"></div>
css:
#maincont {
width:350px;
height:200px;
border:2px solid green;
margin-left:30px; }
A div is just a box/container and is used to create a page layout. Divs can be placed within other divs, next to each other, or in any other combination you can imagine.
Below I am going to put another div inside the first and align it to the left.
html:
<div id="maincont1">
<div id="lfttbx"></div>
</div>
css:
#lfttbx {
width:150px;
height:50px;
border:2px solid red;
float:left; }
Floating a div like this is a common way to achieve a multi columned layout, or even more elaborate designs.
Below I will add another containind div to the structure, but align it to the right.
html:
<div id="maincont1">
<div id="lfttbx"></div>
<div id="rttbx"></div>
</div>
css:
#rttbx {
width:180px;
height:70px;
border:2px solid blue;
float:right; }
August 21st, 2007
Playing around with plugins
Using a combination of plugins to achieve the goal
The goal is..
Objective: to place code in the page and have mini applications working within the parameters of the page
To that end I have mashed a few plugins together and will now try and explain why, that is before I forget myself
Initially I just wanted to be able to add things I had learnt or wanted to explain in the blog post page.
For eg. I followed a tutorial See previous post
I had to at the time take the example out of the wordpress loop, I couldn’t find a way to add the necessary code to the head section of the page without that code residing in every subsequent post I made. See auto generated content in previous highlighted post.
So another plugin to the rescue, sometimes they sound great , but don’t always live up to expectations, this is not one of those. It does what it says, But I still have struggles, and be aware I do make things difficult for myself.. You know I am just playing around here, nowt too serious.
To add a link to a style sheet specific to the
particular post I am writing is easy using the box generated, which appears under your post text box
<link href="mystyle.css" rel="stylesheet" type="text/css" />
So adding the above style sheet link to the add headers box will generate that link, but obviously does nothing to any links that are in the core wordpress index template. These links remain. and I’m wondering now why I am bothered
At this point I have kind of realized that it isn’t a mashup really at all, but to go back would be folly. I kind of wanted to get into what I had done, and why. It seemed like a good idea at the time.
A new page template
Nice tutorial on Binary Moon
I made new page template as shown below, but created a new header..header1.php and had the template call that.
<?php
/*
Template Name: Uniqu
*/
?>
<?php
define('WP_USE_THEMES', false);
require('header1.php');
?>
<div id="content">
</div>
<?php get_footer(); ?>
Why, and for what purpose would you do that
Deleted the style sheet link that is why
And we come full circle..
hello Mr.Plugin, I think I need to add a new unrelated link here.
Could be css, javascript, whatever.
At the end of all that I have test page, not done anything with this yet, but in combination with another ‘add page plugin’ and ‘keep page from main navigation plugin’, we have an option from the web interface to be able easily to add unique content and style to the blog on the fly.
I will have to re-write this..
August 12th, 2007
The site as it stands was produced about feb 06, I was resonably happy with the design at the time, but rachel has moved onwards and is in the process of releasing her second album.
Name to be announced any time soon.
During the last few months Rachel has been busy playing gigs around the uk, building up her exposure, while I was consumed in other projects. Consequently aspects of the site became a little rushed, and thrown together at the last minute.
With the imminent arrival of the new album I wanted to freshen and clean up the design, as well as the underlying code.
The design process involves many factors, most of which I have learned the hard way.
One of the most obvious problems and one that is often overlooked by the fledgling designer is browser compatability.
Whilst my pages may look good on the machine I use, it is not guaranteed to look the same on all systems.
Before we even delve into the issues involving valid css and xhtml markup, I would like to quickly mention colour.
Having built up my knowledge on a 800/600 monitor, not advancing from windows ‘98 until fairly recently in the scheme of things, I was quite shocked to see the massive difference in colour when I viewed my work on my new laptop.
So things needed to change:
You can look at the new, only slightly updated and inprogress design here for now, need to get approval to move the domain and reboot on the Dreamhost servers.
January 8th, 2007
The clearfix way
As mentioned in a previous post, my first website central12.com has moved from free hosting to the servers at Dreamhost.
All the transferring went fairly smoothly, but with the move I was checking through pages, on a newly installed version of internet explorer.
When page construction collapsed
IE 7, and it seems the guys on the ie team have fixed the box model bug, which is a good thing, but now doesn’t support the :before and :after pseudo-elements.
My main pages on the afore mentioned site consist of a two columned on top of a three columned layout, and uses clearfix :after to clear the floated elements.
I had only previosly tested in firefox and IE 6 and the situation was fine.
Convinced that my css and general markup was reasonably ok, I decided to see if it would hold well on microsofts new browser.
Initially everything looked fine, but on closer inspection I noticed the top section of my page slightly overlapped the bottom section, and instantly realised it was a problem concerened with the floated elements, more frustratingly the problem would correct itself if the page was refreshed, which I thought might make testing any fixes a little difficult.
I had a little play around, but to no avail and was beginning to worry that I’d have to visit every page that utilised the 2:3 template.
Not quite loosing all hope, for I am if nothing else dogged and most stubborn, and the solution quickly presented itself.
I googled, the classic first port of call when in a crisis. Searched clearfix ie7 and landed here.at 456 Berea street, and found the link to the solution, I hope.
December 28th, 2006
Previous Posts