Day #4 of a #30 day startup

Lesson learnt today: I still hate css! :)

For those who code in cakephp, and want to highlight the current tab (yet are not extracting menu items from a db table) the following may be of interest.
In the controller function (remember this has to be done for each function that renders the layout and menu element)

if ($category_id==1) {
$this->set('activeTab','General');
} elseif ($category_id==2) {
$this->set('activeTab','Culture');
} elseif ($category_id==3) {
$this->set('activeTab','Tech');

This means that in the element I can set a class for the current tab, via php - unfortunately the sanitisation of code means I can't show it here. Basically the php will echo class="current" within the li> tag if activetab is set to the relevant value.

Day #2 of a #30 day startup

Lesson learnt today? - It's good to have a visual mock-up of what you are heading towards.

I'm writing this entry early today, not because I'd like the afternoon off (chance would be a fine thing) but because I've got an early representation of what a main screen may look like on the site. I already had sketches that I am working to, but a screen mock-up can show us all how the display can look. Already it has indicated to me certain validation restrictions that I will have to include in the coding of the site.

Now, although I'm happy to be described as a programmer or even a web developer, I am not a web designer. Yes, I can change layouts, introduce drop down menus or change the appearance of text. But to make a site overall look professional, it's essential to get layout from a good web designer included - something to consider if you want a website building.

However I stated in my initial post that I'm trying to run this as a lean startup ie not spending money where possible. So I have made use of a css free templates site and chosen this layout http://www.csstemplatesfree.org/preview/Nautica/ It's been written by Luka Cvrk, and if you like his designs (you can find them at Luka's site ) then please patronise his work - he has both free and decently-priced premium templates. I'm not going to stick to everything in that layout - much will have to change as my site develops. But it's good, I feel, to get a glimpse of how the site may look.



PS
CakePhp code tip: To specify which css file and layout to use for a screen, use this line in the function code (for example for index or view) in the controller

$this->layout='yournew_layout';

You can then specify the css file you require from that layout file.

How to use a graphic to link elsewhere in WordPress

I wanted to change a graphic image into a clickable link, on a Wordpress site (La Liga referee statistics )I've been developing and hosting for a Spanish colleague.

The first step was to enter the code for the text link on the page

<a href="http://www.losarbitroscuentan.com/index.php?page_id=8790" title="Los Arbitros Cuentan - Primera - Click!" id="test-logo">Primera Division</a>

You can see that the id is specified as "test-logo" The page_id (so you go to the correct link) is obtained within Wordpress editor, looking at the pages and pressing right-click, to copy the link location, and then pasting into Notepad - or merely view the URL in your browser.

Now to allocate that link-text to a graphic, we change the relevant css file. This is normally the style.css but this may change. Also, if you are using a theme, you will need the edit the css file in that theme's folder.

#test-logo {
background-image:url(/wp-content/uploads/2010/10/graphicname.jpg);
display:block;
height:37px;
width:190px;
}

So far so good, and clicking on the image will take you to your desired screen. Well, each time you save changes to a css file you should reload the webpage, so it replaces the css info in the cache with the updated data.
Looks promising, but the only problem now is we have both text and graphic conflicting with each other!
There is an awesome technique we can use in css/html - "text-indent" to take the text completely off the screen ie to hide the text

#test-logo {
background-image:url(/wp-content/uploads/2010/10/graphicname.jpg);
display:block;
height:37px;
text-indent:-9999px;
width:190px;
}

Pretty cool hey? Many thanks to this technical site for pointing me in the right direction to accomplish this!

Learning from other websites.

I already knew how to look at html code on a lot of websites. You press right-click and then select "View Page Source". However, what I didn't realise, was that it's possible in many cases to view the CSS values too (eg how big the font is, what padding and/or margin is used etc.). This page explains different ways to view a website's CSS. The option I took was to use a firefox add-in provided by Chris Pederick at this address.