Endre WP-theme

Nordino · 31 Mar 2010

Jeg har funnet et fint theme til bloggen min, men vil gjerne gjøre noen visuelle endringer for å gjøre det "perfekt". Problemet er at jeg ikke kan noen ting om CSS.

Finnes det noen WSIWYG-editorer som gjør at du kan endre CSS-koden mens du ser hvordan det blir? Vil bli utrolig tungvint om jeg skal gjette meg frem, lagre fila og laste opp helt til jeg er fornøyd.

Prøvde Dreamviewer, men får ikke opp "design" etter at jeg har lagt inn koden under "code".

Tips?

Tonny Kluften · 31 Mar 2010

Det må bli å lage backup av CSS-fila så redigere i wp admin og klikke save for å se hvordan det blir. Det er ikke noen enklere måte å gjøre dette på.

peterandrej · 31 Mar 2010

Nordino skrev:
Prøvde Dreamviewer, men får ikke opp "design" etter at jeg har lagt inn koden under "code".

Det er fordi Dreamweaver ser etter html-koder den kan lese. I WP-temaet ditt er det massevis av php som er spesifikke for wp som DW ikke skjønner noe av. Jeg vil tippe at til og med CSS-filen din hentes inn via en WP-spesifikk php-kode.

Du har 2 valg:

1. Gjøre wp-temaet ditt statisk, slik at du kan redigere det via Dreamweaver. Men da må jo sette inn wp-kodene etterpå, selvsagt.

2. Du kan installere WP lokalt, så slipper du i det minste å bruke ftp hele tiden. Det sparer veldig mye tid som oftest, da du kan lagre filen og se resultatet via en reload i nettleseren din umiddelbart.

picxx · 1 Apr 2010

Nordino skrev:
Tips?

Spør spesifikt om hva det er du vil forandre, og legg ut css filen din her....

Nordino · 3 Apr 2010

picxx skrev:
Spør spesifikt om hva det er du vil forandre, og legg ut css filen din her....

OK, skal gjøre det. Limer inn et innlegg jeg posta på WordPress.org sitt forum som jeg ikke har fått svar på:

Hi all. I just created a new blog (Nordinito.com - Livin' la vida buena) and I am trying to configure it. I chose the theme SleekBluey which I think looks great, but I'd like to edit it a little bit:

1. Remove the calendar from the right menu. It seems to be connected to the theme because it is not possible to remove it under "widgets". I opened sidebar.php and managed to remove it, but the menu gets bugged afterwards. Can you please tell me what to edit in order to remove it successfully?

Kode:

<div id="sidebar">

<li class="widget widget_calendar">
<?php get_calendar();?>
<?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar(1) ) :
?>
<?
else : ?>
<li class="widget_categories"><h2>Categories</h2>

<?php wp_list_cats('sort_column=name&optioncount=1'); ?>

2. I'd like to put the "pages menu" on the black line. Right now the link buttons are located slightly over. How do I do this?

3. I want to put my own banner as header (same size as the blue square) and remove what is there now (Nordinito.com | Living la vida buena).

Header.php:

Kode:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>

<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />

<title><?php bloginfo('name'); ?> <?php if ( is_single() ) { ?> &raquo; Blog Archive <?php } ?> <?php wp_title(); ?></title>

<meta name="generator" content="WordPress <?php bloginfo('version'); ?>" /> <!-- leave this for stats -->
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
<link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS Feed" href="<?php bloginfo('rss2_url'); ?>" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
<!-- <?php bloginfo('stylesheet_directory'); ?>/ -->
<script language="javascript" type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/js.js"></script>
<script language="javascript" type="text/javascript">	
	if(f)
	{
		write_css('<?php bloginfo('stylesheet_directory'); ?>');
	}
</script>
<?php wp_head(); ?>
</head>

<body>
<center>
<div id="page">

<div id="header">
	<div id="header_top">
		<div id="header_title">
			<?php bloginfo('name'); ?> | <span><?php bloginfo('description'); ?></span>
		</div>
	</div>
	<div id="header_end">
		<div id="menu">
			<div id="menu_pad">
				<div id="menu_items">
					&nbsp;&nbsp;<div><a href="<?php bloginfo('home'); ?>">Home</a></div>&nbsp;&nbsp;<?php $my_query = new WP_Query('post_type=page&orderby=name&order=ASC'); ?>

<?php while ($my_query->have_posts()) : $my_query->the_post(); 

if( $post->post_parent == 0 )
{?>
						
					<div><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></div>&nbsp;&nbsp;
				
<?php } endwhile; 
?>
				</div>
				<div id="menu_search_box">
					<form method="get" id="searchform" style="display:inline;" action="<?php bloginfo('home'); ?>/">
					Search:&nbsp;
					<input type="text" class="s" value="<?php the_search_query(); ?>" name="s" id="s" />&nbsp;
					<input type="image" src="<?php bloginfo('stylesheet_directory'); ?>/images/go.gif" value="Submit" class="sub" align="top" />
					</form>
				</div>
			</div>
		</div>
	</div>
</div>

<div id="blog">
<div id="blog_top">
	<div id="blog_left">

4. Is there a way I can get an auto excerpt that makes only the first paragraph of my post show on the front page?

5. How can I get a views count in my posts?

6. I have a special code to include an 88x88 pix photo in the left side of all my posts. Is it possible to automaticly make it show up in the HTML box every time I write a new article?

The code is:

Kode:

<img style="margin-right: 5px;" src="IMAGE LINK" alt="" width="88" height="88" align="left" />

Daniel Aune · 3 Apr 2010

Når det gjelder headeren, så kan du prøve og erstatte

PHP:

<?php bloginfo('name'); ?> | <span><?php bloginfo('description'); ?></span>

med

PHP:

<a href="<?php bloginfo('url'); ?>" title="<?php bloginfo('name'); ?>"><img src="URL TIL BILDE" alt="<?php bloginfo('name'); ?> /></a>

eller

PHP:

<img src="YOUR IMAGE URL HERE"/><span></span></a>

4. Kan du ikke bare legge inn "" bak det du vil at skal vises på forsiden? Eventuelt bare trykke på den "insert more tag" knappen bak avsnittet ditt?

5. WordPress › WP-PostViews « WordPress Plugins ?

hansson · 3 Apr 2010

Neimen. Hallo og takk for sist i Buenos Aires (Caix!). Tror ikke det er så mange Nordinitos der nede, så tar sjansen på at vi kjenner hverandre.

Her er noen forslag:

1. Kalenderen skal være en widget, så prøv igjen å slette den. Gå til Widgets - ute til høyre finner du sidebar home/sidebar blog el.l. Klikk for å slå ut sidebar-feltet. Der ser du de ulike widgetene som ligger i sidebar. Klikk på calendar for å slå ut denne. Klikk Delete nederst i venstre hjørne av feltet som kommer ut. Funker det?

2. I style.css legger du til følgende linje under #menu_items på en linje innenfor klammene: padding-top:15px;

3. Lag et banner som er identisk i størrelse osv som det som er der nå. Last det opp til webhotellet ditt med FTP i images-mappa som ligger på denne adressen: http://nordinito.com/wp-content/themes/sleekbluey-alt/images/header_top_bg.gif

Du må kalle ditt eget headerbanner for header_top_bg.gif

Når ftp-programmet spør om du vil erstatte den eksisterende filen svarer du selvsagt ja

4. Dette avhenger av om du har puttet inn en "read more"-linje i teksten din. Du finner en knapp for dette i tekst-editoren når du skriver/redigerer artikler. Putt den inn etter første avsnitt, f.eks. Når du har gjort dette går du til settings>reading og velger der å bare vise summary av hver post.

/// EDIT: Ser du har fått til dette slik du ville?

5. Dette finnes det helt sikkert plugins for. Gå til wordpress.org sine pluginsider og søk. Du må så sette inn en kodesnutt i single.php og evt. page.php der du vil vise teksten med tallet. Du finner informasjon om dette i plugin-dokumentasjonen.

6. Tror ikke det er mulig, men når du bruker Wordpress sin bildeopplaster for å legge inn nye bilder i teksten, kan du velge der at bildet skal flyte til venstre i teksten.

For å få inn en høyremarg på alle bilder i postene kan du evt. skrive følgende i css:

.artikkelbilde {margin-right:5px; }

legg evt. inn float:left; også hvis du vil slippe å tenke på dette når du laster opp bildet. Du kan også legge inn en ramme rundt bildet hvis du vil ha det (border:3px solid #fargekode; ), osv.

Fra nå av kan du på alle nye artikler bare gå inn på html-visning (fane øverst til høyre i skriveruta) og legge inn class="artikkelbilde" i img-taggen din slik:

HTML:

<img class="artikkelbilde" src="http://blablabla.com/blabla/bilde.jpg" />

For å unngå å måtte angi størrelsen bør du fikse bildet ditt på forhånd slik at det er 88x88 piksler.

Ellers bare et tips: Bloggdesignet ditt er veldig smalt (811 px), og bildene på 88x88 er små. Hvis du en gang i fremtiden endrer mal på bloggen din kommer bildene kanskje til å se veldig små ut. Hvis jeg var deg ville jeg enten valgt en bredere mal på 960 px el.l. eller mer hvis du tar sjansen (jeg liker brede sider driter i om noen må scrolle...), eller endret bredden på den du har. Hvis du får det til.

/// EDIT: Så nå at småbildene er thumbnails. Tror et breddeformat-bilde på toppen av artikkelen vil vises riktig på fronten.

Legger du inn bilder i full bredde i artikkelen (ikke bruk align/float left) så får du ihvertfall økt mulighetene til at det ser noenlunde skapelig ut ved et framtidig malbytte.

Håper dette hjelper!

Nordino · 3 Apr 2010

Daniel Aune skrev:
Når det gjelder headeren, så kan du prøve og erstatte

Jeg prøvde å erstate med kodene du kom med, men begge ble litt bugga av en eller annnen grunn? Banneret som er det nå er for øvrig bare noe rølp som jeg mekka på 24 sekunder for å se om det funka med en banner med eksakt like stor bredde som designet har

4. Kan du ikke bare legge inn "" bak det du vil at skal vises på forsiden? Eventuelt bare trykke på den "insert more tag" knappen bak avsnittet ditt?

Hvis jeg legger inn  så kommer det opp "Read the rest of this entry" etter utdraget i tillegg til "read more" i boksen under. Hadde vært fint å bare hatt "Read more" nederst.

Nordino · 3 Apr 2010

hansson skrev:
Neimen. Hallo og takk for sist i Buenos Aires (Caix!). Tror ikke det er så mange Nordinitos der nede, så tar sjansen på at vi kjenner hverandre.

Jøss, dette var overraskende! Du fikk meg til å tenke fælt på hvilken landsmann jeg hadde møtt ute i Argentina, men da jeg grublet litt over brukernavnet ditt så gikk det opp et lys for meg

Hvor i verden befinner du deg nå?

Her er noen forslag:

1. Kalenderen skal være en widget, så prøv igjen å slette den. Gå til Widgets - ute til høyre finner du sidebar home/sidebar blog el.l. Klikk for å slå ut sidebar-feltet. Der ser du de ulike widgetene som ligger i sidebar. Klikk på calendar for å slå ut denne. Klikk Delete nederst i venstre hjørne av feltet som kommer ut. Funker det?

Jeg har slettet kalenderen, men den er der fortsatt, dessverre. Virker som at den er festet til sidebar.php.

2. I style.css legger du til følgende linje under #menu_items på en linje innenfor klammene: padding-top:15px;

Glimrende! Det funka perfekt.

3. Lag et banner som er identisk i størrelse osv som det som er der nå. Last det opp til webhotellet ditt med FTP i images-mappa som ligger på denne adressen: http://nordinito.com/wp-content/themes/sleekbluey-alt/images/header_top_bg.gif

Du må kalle ditt eget headerbanner for header_top_bg.gif

Når ftp-programmet spør om du vil erstatte den eksisterende filen svarer du selvsagt ja

Problemet er at headeren ikke er et bilde fra før av, slik at det ikke er noe å erstatte. Må nok editere noe i header.php som Aune er inne på.

HTML:
6. Tror ikke det er mulig, men når du bruker Wordpress sin bildeopplaster for å legge inn nye bilder i teksten, kan du velge der at bildet skal flyte til venstre i teksten.

For å få inn en høyremarg på alle bilder i postene kan du evt. skrive følgende i css:

.artikkelbilde {margin-right:5px; }

legg evt. inn float:left; også hvis du vil slippe å tenke på dette når du laster opp bildet. Du kan også legge inn en ramme rundt bildet hvis du vil ha det (border:3px solid #fargekode; ), osv.

Fra nå av kan du på alle nye artikler bare gå inn på html-visning (fane øverst til høyre i skriveruta) og legge inn class="artikkelbilde" i img-taggen din slik:

HTML:

<img class="artikkelbilde" src="http://blablabla.com/blabla/bilde.jpg" />

For å unngå å måtte angi størrelsen bør du fikse bildet ditt på forhånd slik at det er 88x88 piksler.

Takker for tipset

picxx · 3 Apr 2010

Kalenderen er plassert over den dynamiske sidebaren, så du kan ikke slette den med widgets (du har ikke tilfeldigvis rota litt rundt i fila fra før av?).
Prøv å slett dette du

<li class="widget widget_calendar">
<?php get_calendar();?>

Nordino · 3 Apr 2010

picxx skrev:
Kalenderen er plassert over den dynamiske sidebaren, så du kan ikke slette den med widgets (du har ikke tilfeldigvis rota litt rundt i fila fra før av?).
Prøv å slett dette du

Takker for tipset. Det funka, men sidebaren ble litt bugga. Det er en blå stripe under "Kategorier" og et hvitt mellomrom der du ser StarTour-logoen under Adverts.

Noen måte jeg kan fikse det på?

Tror ikke jeg har surra noe inne i den fila. Jeg prøvde å fjerne kalenderen på egenhånd, men kopierte tilbake default-versjonen etterpå.

picxx · 3 Apr 2010

Forsøk å putt tilbake denne

<li class="widget widget_calendar">

hansson · 3 Apr 2010

Det mangler noen småting i koden nå, både i headeren og sidebar. Det er det som får de rare tingene til å skje.

I headeren må du putte på et hermetegn på slutten av alt="nordinito.com" da blir det riktig.

Hvis du vil erstatte banneret som ligger der fra før må du kalle filen din nøyaktig det samme og laste opp til samme mappe på serveren. Da legges det inn på samme sted som det gamle banneret, via CSS. Nå har du lagt det inn som html og da legger den seg oppå den gamle (som ligger som et bakgrunnsbilde).

Det beste er å fjerne hele bildet fra htmlkoden og bare laste opp et nytt bakgrunnsbilde!

Sidebar har dette, som er feil:

HTML:

<ul>
</li>	
		
<li id="categories-5" class="widget widget_categories"><h2 class="widgettitle">Kategorier</h2>
		<ul>
	<li class="cat-item cat-item-3"><a href="http://nordinito.com/?cat=3" title="Vis alle innlegg arkivert under Football">Football</a> (1)

</li>
	<li class="cat-item cat-item-5"><a href="http://nordinito.com/?cat=5" title="Vis alle innlegg arkivert under Poker">Poker</a> (2)
</li>
	<li class="cat-item cat-item-4"><a href="http://nordinito.com/?cat=4" title="Vis alle innlegg arkivert under Travel">Travel</a> (1)
</li>
		</ul>

Bør være noe slikt som dette (men her må du ta hensyn til php-koden som ligger innimellom... det er ul- og li-taggene du skal konsentrere deg om):

HTML:

<ul>
	   <li id="categories-5" class="widget widget_categories"><h2 class="widgettitle">Kategorier</h2></li>
	   <li class="cat-item cat-item-3"><a href="http://nordinito.com/?cat=3" title="Vis alle innlegg arkivert under Football">Football</a> (1)</li>
	  <li class="cat-item cat-item-5"><a href="http://nordinito.com/?cat=5" title="Vis alle innlegg arkivert under Poker">Poker</a> (2)</li>
	  <li class="cat-item cat-item-4"><a href="http://nordinito.com/?cat=4" title="Vis alle innlegg arkivert under Travel">Travel</a> (1)</li>
	  </ul>

Er forøvrig på vei til Lima om et par-tre uker, er du der for tiden eller? Jeg er i São Paulo nå.

Nordino · 3 Apr 2010

picxx skrev:
Forsøk å putt tilbake denne

Fortsatt ikke 100 %

Nordino · 3 Apr 2010

Mulig at det bare er jeg som er en gedigen idiot, men uansett hva jeg endrer på så blir det like mange bugs i designet

Slik ser header.php og sidebar.php ut nå:

header.php

Kode:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>

<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />

<title><?php bloginfo('name'); ?> <?php if ( is_single() ) { ?> &raquo; Blog Archive <?php } ?> <?php wp_title(); ?></title>

<meta name="generator" content="WordPress <?php bloginfo('version'); ?>" /> <!-- leave this for stats -->
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
<link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS Feed" href="<?php bloginfo('rss2_url'); ?>" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
<!-- <?php bloginfo('stylesheet_directory'); ?>/ -->
<script language="javascript" type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/js.js"></script>
<script language="javascript" type="text/javascript">	
	if(f)
	{
		write_css('<?php bloginfo('stylesheet_directory'); ?>');
	}
</script>
<?php wp_head(); ?>
</head>

<body>
<center>
<div id="page">

<div id="header">
	<div id="header_top">
		<div id="header_title">
<img src="http://www.nordinito.com/wp-content/uploads/banner.jpg" alt="nordinito.com">
		</div>
	</div>
	<div id="header_end">
		<div id="menu">
			<div id="menu_pad">
				<div id="menu_items">
					&nbsp;&nbsp;<div><a href="<?php bloginfo('home'); ?>">Home</a></div>&nbsp;&nbsp;<?php $my_query = new WP_Query('post_type=page&orderby=name&order=ASC'); ?>

<?php while ($my_query->have_posts()) : $my_query->the_post(); 

if( $post->post_parent == 0 )
{?>
						
					<div><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></div>&nbsp;&nbsp;
				
<?php } endwhile; 
?>
				</div>
				<div id="menu_search_box">
					<form method="get" id="searchform" style="display:inline;" action="<?php bloginfo('home'); ?>/">
					Search:&nbsp;
					<input type="text" class="s" value="<?php the_search_query(); ?>" name="s" id="s" />&nbsp;
					<input type="image" src="<?php bloginfo('stylesheet_directory'); ?>/images/go.gif" value="Submit" class="sub" align="top" />
					</form>
				</div>
			</div>
		</div>
	</div>
</div>

<div id="blog">
<div id="blog_top">
	<div id="blog_left">

Sidebar.php

<div id="sidebar">

<ul>
<li class="widget widget_calendar"> </li>

<?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar(1) ) :
?>
<?
else : ?>
<ul>
<li id="categories-5" class="widget widget_categories"><h2 class="widgettitle">Kategorier</h2></li>
<li class="cat-item cat-item-3"><a href="http://nordinito.com/?cat=3" title="Vis alle innlegg arkivert under Football">Football</a> (1)</li>
<li class="cat-item cat-item-5"><a href="http://nordinito.com/?cat=5" title="Vis alle innlegg arkivert under Poker">Poker</a> (2)</li>
<li class="cat-item cat-item-4"><a href="http://nordinito.com/?cat=4" title="Vis alle innlegg arkivert under Travel">Travel</a> (1)</li>
</ul>
<?php wp_list_cats('sort_column=name&optioncount=1'); ?>
</ul>
</li>

<li class="widget_archives"><h2>Archives</h2>
<ul>
<?php wp_get_archives('type=monthly'); ?>
</ul>
</li>

<?php get_links_list(); ?>

<li class="widget_meta"><h2>Meta</h2>
<ul>
<?php wp_register(); ?>
<li><?php wp_loginout(); ?></li>
<li><a href="http://validator.w3.org/check/referer" title="This page validates as XHTML 1.0 Transitional">Valid <abbr title="eXtensible HyperText Markup Language">XHTML</abbr></a></li>
<li><a href="http://gmpg.org/xfn/"><abbr title="XHTML Friends Network">XFN</abbr></a></li>
<li><a href="http://wordpress.org/" title="Powered by WordPress, state-of-the-art semantic personal publishing platform.">WordPress</a></li>
<?php wp_meta(); ?>
</ul>
</li>

<?php endif; ?>
</ul>
</div>

Artig at du enda er i Sør-Amerika. Noe spesielt du skal i Lima? Jeg reiser dessverre til USA om en drøy uke, men kan jo komme med noen tips til deg når det gjelder byen. Legg meg til på MSN om du vil (nordin at newutd.com).

Sida di, frilansinfo.no, ser forresten veldig bra ut!

Endre WP-theme

Nordino

Medlem

Tonny Kluften

Administrator

peterandrej

pensjonert moderator

picxx

WF 09

Nordino

Medlem

Daniel Aune

Medlem

hansson

Langveisfarende

Nordino

Medlem

Nordino

Medlem

picxx

WF 09

Nordino

Medlem

picxx

WF 09

hansson

Langveisfarende

Nordino

Medlem

Nordino

Medlem