You are currently browsing the ChangeLog category.
I pretty much decided that what I did in the 13th Log, did not look exactly the way I wanted it to. Due to lack of time before the exam, I changed it back to the way it was before.
Except the class “.maincontent”. I kept that because it is good!!!! My page looks so much better after I made that.
The trunk test is a usability test proposed be Steve Krug, author of the book “Don’t make me think”.
He asks us to imagine being blindfolded and stuffed into the trunk of a car. On running up on a web page imagine a quick peak around the blindfold and through a crack in the trunk. Did you locate all of the required navigation components?
My boyfriend did a trunk test on my websites Interaction Design sub-page and these are the results:
I also did a think-loud test where I asked the person to find a few things on my site. Here are the results:
Find the exam from Media and Communication. Found fast, but that is probably because he knows I go to ITU.
Find the place, where it says what this blog is about. Found relatively fast, though took a detour around home before hitting the about menu.
Find a project on the site. Found fast under Portfolio
Find the personal part of the website. Speakers Corner, intuitively, Found fast
Find the ideas that I have for changed I want to make to the blog. Found fast in Ideas under Changelog
Comments from the tests:
I don’t think the links are visible enough. (They were dark brown and blended in with the text)
I probably wouldn’t know what ITU was if I didn’t know you in person.
I took both of these into account, and wrote a little bit on ITU, in the menu “ITU”. I tried to change the links, but making the font-size bigger made it too big, so I ended up giving it a brigther color instead, which helped a lot.
Today I changed the Home. I wanted it to have a personal welcome to the left and a welcome video on the right.
I probably chose the easy way out, but I simply don’t know enough to do it any other way.
In the main index template I changed the loop. After get_header I added a <div> with the content.
<?php get_header(); ?>
<div><h1>Velkommen til min blog</h1><h3>Bloggen viser mit arbejde på ITU, men det er også min personlige blog hvor jeg skriver om alt mellem himmel og jord under The Corner</h3></div><div><object width=”385″ height=”312″><param name=”movie” value=”http://www.youtube.com/v/RUCfSiMB_2E&hl=en_US&fs=1&”></param><param name=”allowFullScreen” value=”true”></param><param name=”allowscriptaccess” value=”always”></param><embed src=”http://www.youtube.com/v/RUCfSiMB_2E&hl=en_US&fs=1&” type=”application/x-shockwave-flash” allowscriptaccess=”always” allowfullscreen=”true” width=”385″ height=”312″></embed></object></div>
I the created a new ID called maincontent to be able to control my posts better. Now the maincontent is the div all posts are held within.
<div id=”maincontent”>
<div><h2>Recent Posts:</h2></div>
I also had to write a headline called “Recent Posts” and make it come before the <?php if (have_posts()) : ?> call.
To match the new divs a included corresponding classes in the stylesheet. And it actually works! I’m pretty stoked about that.
.velkomst {
float: left;
max-width: 300px;
}.videovelkomst {
float: right;
position: relative;
z-index:-100;.recent {
margin-bottom: 20px;
}
Took a lot of work, but in the end it turned out to be quite simple. (“Simple” meaning: with a lot of help from Jonas, one of our teachers)
I changed the Header.php and added a bunch of new parametres, simply calling the different headers depending on which ever page or category was visited.
</head>
<body>
<div id=”wrapper”>
<?phpif(is_page(‘50′)){
$class=”header-bg-50″;
} elseif(is_page(‘2′)){
$class=”header-bg-2″;
} elseif(is_page(‘357′)){
$class=”header-bg-357″;
} elseif(is_page(‘281′)){
$class=”header-bg-281″;
} elseif(is_page(‘113′)){
$class=”header-bg-113″;
} elseif(is_page(‘351′)){
$class=”header-bg-351″;
} elseif(is_page(‘355′)){
$class=”header-bg-355″;
} elseif(is_page(‘353′)){
$class=”header-bg-353″;
} elseif(is_page(‘317′)){
$class=”header-bg-317″;
} elseif(is_page(‘313′)){
$class=”header-bg-313″;
} elseif(is_category(‘1′) ){
$class=”header-bg-cat-1″;
} elseif(is_category(‘4′) ){
$class=”header-bg-cat-4″;
} else {
$class=”header-bg”;
}
?>
<div id=”header” class=’<?php echo $class;?>’>
Then I had to include all of this in the stylesheet.css, calling the different header-pictures for each page and category:
#header.header-bg-2 {/*rammer about*/
background-image: url(‘images/header-about2.jpg’);
background-repeat:no-repeat;
position:relative;
z-index:-1;
top:0;
left:0;
height:250px;
}
#header.header-bg-cat-4 {/*rammer changelog*/
background-image: url(‘images/header-bg-changelog.jpg’);
background-repeat:no-repeat;
position:relative;
z-index:-1;
top:0;
left:0;
height:250px;
}
#header.header-bg-cat-1 {/*rammer ideas*/
background-image: url(‘images/header-bg-changelog.jpg’);
background-repeat:no-repeat;
position:relative;
z-index:-1;
top:0;
left:0;
height:250px;
}
#header.header-bg-50 {/*rammer portfolio*/
background-image: url(‘images/header-bg-portfolio.jpg’);
background-repeat:no-repeat;
position:relative;
z-index:-1;
top:0;
left:0;
height:250px;
}
#header.header-bg-357 {/*rammer gallery*/
background-image: url(‘images/header-bg-portfolio.jpg’);
background-repeat:no-repeat;
position:relative;
z-index:-1;
top:0;
left:0;
height:250px;
}
#header.header-bg-281 {/*rammer projects*/
background-image: url(‘images/header-bg-portfolio.jpg’);
background-repeat:no-repeat;
position:relative;
z-index:-1;
top:0;
left:0;
height:250px;
}
#header.header-bg-113 { /*rammer ITU*/
background-image: url(‘images/header-bg-itu.jpg’);
background-repeat:no-repeat;
position:relative;
z-index:-1;
top:0;
left:0;
height:250px;
}
#header.header-bg-351 {/*rammer dissemination, prj. web.*/
background-image: url(‘images/header-bg-itu.jpg’);
background-repeat:no-repeat;
position:relative;
z-index:-1;
top:0;
left:0;
height:250px;
}
#header.header-bg-355 {/*rammer Interaction*/
background-image: url(‘images/header-bg-itu.jpg’);
background-repeat:no-repeat;
position:relative;
z-index:-1;
top:0;
left:0;
height:250px;
}
#header.header-bg-353 {/*rammer Media and communication*/
background-image: url(‘images/header-bg-itu.jpg’);
background-repeat:no-repeat;
position:relative;
z-index:-1;
top:0;
left:0;
height:250px;
}
#header.header-bg-317 {/*rammer inspiration*/
background-image: url(‘images/header-bg-inspiration.jpg’);
background-repeat:no-repeat;
position:relative;
z-index:-1;
top:0;
left:0;
height:250px;
}
#header.header-bg-313 {/*rammer corner*/
background-image: url(‘images/header-bg-corner.jpg’);
background-repeat:no-repeat;
position:relative;
z-index:-1;
top:0;
left:0;
height:250px;
}
Now I just need to make all of the different headers. Right now I have a bunch of temporary ones which serve as stand-ins to make sure everything works.
Changed width of sub-menus, they were too wide, reaching across the border of the menubar and over her hair.
>>>Major problem though: titles of sub-menus, fx Media and Communication reaches across the border of the black area, hence not all of the title is shown <<<
.sf-grey ul ul {
top: 28px;
position: absolute;
left: -999em;
width: 147px; Important! Changed here (was 160px)
margin: 0;
padding: 0;
}——————————-
.sf-grey li li {
float: left;
padding: 0;
width: 140px; Changed here (was 160px)
}.sf-grey a,
.sf-grey a:visited,
.sf-grey a:hover {
font-size: 12px;
font-weight: bold;
float: left;
color: white;
text-decoration: none;
display: block;
height: 28px;
line-height: 28px;
padding: 0 15px;
overflow: hidden;
}.sf-grey li li a,
.sf-grey li li a:visited,
.sf-grey li li a:hover {
padding: 0;
text-indent: 15px;
width: 140px; Changed here (was 160px)
And changed the link colors.
.sf-grey li.selected a,
.sf-grey li.current-cat a,
.sf-grey li.current-cat-parent a,
.sf-grey li.current_page_item a,
.sf-grey li.current_page_parent a,
.sf-grey li.current_page_ancestor a {
/*background: #808080;*/
color:#CD5B45; /*farver det aktive menupunkt laksefarvet */
}
.sf-grey li.current_page_item ul li a,
.sf-grey li.current_page_parent ul li a
{
/*background: #808080;*/
color:#fff; /*farver underpunkterne hvide */
}.sf-grey li.current_page_item a {
color:#E9967A;} /*farver det specifikke aktive underpunkt lyserødt */.sf-grey a:hover,
.sf-grey li.wpmhover {
/*background: #808080;*/
color:#CD5B45; /*farver hover samme laksefarvet som valgt menudel*/
}
I’m still trying to make the menubar do as I please. This is all that I have changed so far:
Original:
.sf-grey li {
float: left;
padding: 0;
height: 28px;
position: relative;
}.sf-grey li.selected,
.sf-grey li.current-cat,
.sf-grey li.current-cat-parent,
.sf-grey li.current_page_item,
.sf-grey li.current_page_parent,
.sf-grey li.current_page_ancestor {
background: #000000;
}.sf-grey li:hover,
.sf-grey li.wpmhover {
background: #000000;
}
And the new: (which I had a lot of help from our assistant teacher Stina making.)
Sorry changes written in danish.
.sf-grey li {
float: left;
padding: 0;
height: 28px;
position: relative;padding-right:5.2%; /* prøv dig frem til du finder et tal der passer */
}
Her er der ændret så menupunkterne spreder sig ud over hele baren.
.sf-grey li.selected a,
.sf-grey li.current-cat a,
.sf-grey li.current-cat-parent a,
.sf-grey li.current_page_item a,
.sf-grey li.current_page_parent a,
.sf-grey li.current_page_ancestor a {
/*background: #000000;*/
color:#f00; /*farver det aktive menupunkt rødt */}
Her kan jeg simpelthen ikke begribe hvordan jeg skal få kun parent menupunktet til at være rødt og current til at være rødt. Lige nu farver den alt under parent’en rødt.
.sf-grey li.current_page_item ul li a,
.sf-grey li.current_page_parent ul li a
{
/*background: #808080;*/
color:#ffffff; /*farver underpunkterne hvide */
}Det her fungerer.
.sf-grey li.current_page_item a {
color:#666666; /*farver det specifikke aktive underpunkt rødt igen */}
Har jeg så lavet om til gråt så jeg kunne kende forskel. (#666666)
.sf-grey a:hover,
.sf-grey li.wpmhover {
/* background: #000000;*/
color:#F00;
}Det her fungerer.
This is my problem illustrated with a picture.
The current page is Interaction Design, which has the parent ITU. As you can see everything is red, when really the “Dissemination” and the “Media” option is supposed to be white, because they’re not selected.
Right now I have two menubars, that is because I’m trying to make the new menubar (The menubar plugin – the bottom one) look like the old (the top one).
So, basically the menubar is proving rather difficult to adjust.
I would like the text to become a color (other than white) when you hover above the menu item. And another color for the current page visited.
Like you can see underneath, the top menubars text for the current visited page is a light pink. However the new menubar is still just white.
I succeded in making the hover change to red (#f00) by changing the
.sf-grey li.selected,
.sf-grey li.current-cat,
.sf-grey li.current-cat-parent,
.sf-grey li.current_page_item,
.sf-grey li.current_page_parent,
.sf-grey li.current_page_ancestor {
background: #808080;
}.sf-grey li:hover,
.sf-grey li.wpmhover {
background: #808080;
}
to:
.sf-grey a:selected,
.sf-grey a.current-cat,
.sf-grey a.current-cat-parent,
.sf-grey a.current_page_item,
.sf-grey a.current_page_parent,
.sf-grey a.current_page_ancestor {
/*background: #808080;*/
color:#F00;
}.sf-grey a:hover,
.sf-grey li.wpmhover {
/*background: #808080;*/
color:#F00;
in the sf-grey.php file for the Menubar plugin.
Now that I have gotten my menubar I could finally get rid of my sidebar.
Hid the sidebar by simply deleting the content of the sidebar.php file. It was the only way it could be done. Otherwise when you were under a “category” page i would be displayed anyway.
Then I changed my footer, I wanted it to display links instead of recent posts. So in my footer.php I changed the:
<ul>
<li>Recent Posts:</li>
<?php wp_get_archives(‘type=postbypost&limit=5′); ?>
</ul>
to:
<ul>
<li>Links:</li>
<?php wp_list_bookmarks(‘categorize=0&title_li=’); ?>
</ul>
Now I need to change to links to something relevant instead of just the blogroll.
…
I’ve changed the links to ITU and to the blogs for my classes for now.
Changed all #content h2 font to “arial black” and removed the underline.
Installed Menubar plugin and created the correct menu for the blog. Haven’t removed the old one or the sidebar yet. Will get to that as well as editing CSS on new menu later.
Created all of the missing pages from my mockup.
Installed NextGen Gallery plugin for the Gallery page under Portfolio, it took quite a lot of work to get that to work. Creating folders in WP content and changing the “tilladelser” to 777 in my filezilla. Luckily there were a couple of good guides on the internet.
It is a very nice plugin, I can definetely recommend it.
Finally the page2cat works, now my categories are displayed under the correct page.
All I had to do was find the correct categori ID to insert into my page, (like this [catlist=#] # being the ID number) stuuuupiddd me!
I still need to change the plugin however. It has to display entire posts instead of just titles.