[Opgelost] logo aangepast volgens de adviezen maar geen resultaat

compufairy · Post by **compufairy** » Sun Sep 07, 2008 11:18 pm

Sinds een paar dagen ben ik flink aan het experimenteren met CMSMS, en ben er heel blij mee. Alles is helder. Het enige waar ik tot nu toe niets van begrijp is het aanpassen van de afbeelding in de header. Blijkbaar doe ik iets verkeerd. Ik heb een wat oudere versie van PHP, 4.x, maar volgens de installatieschermen was het voldoende. Ik ben geen php/css wizard, dus mogelijk doe ik iets verkeerd in de CSS, of moet ik in de template iets wijzigen?

het probleem
Ik heb geprobeerd om een ander logo in de header te plaatsen (op de wijze zoals onderstaand cursief aangegeven, tekst gevonden in een ander topic), en de CSS daarop aangepast. De hoogte van de header is inderdaad conform de hoogte van het logo, maar verder gebeurt er niets.

Je kunt eenvoudig een logo uploaden, via filemanager/imagemanager of gewoon via FTP. Laad alle data die je upload wel naar de folder "uploads" of maak folders daar onder aan. Vervolgens kun je in de stylesheet van je template (te vinden door vanuit je template naar de CSS-button te gaan), je stylesheet aanpassen. In het blok "div# header h1 a" staat dan de verwijzing naar het logo wat getoond wordt. Vervang deze door je eigen geuploade image. Let op dat als je logo hoger/lager is dan de bestaande, je zowel in "div# header" als in "div#header h1 a" de hoogte moet aanpassen.

Ik heb er voor gezorgd dat de afbeelding ook in de juiste directory staat. Is er iemand die ziet wat ik verkeerd doe? Onderstaand de code:

/*** header ***
we will hide text and replace it with a image
we need to assign a height for it so that the image wont cut off
*/
div#header {
height: 166px; /* adjust according your image size */
background: transparant url(uploads/images/pfwp_jpg.jpg) no-repeat 0 12px;
}

div#header h1 a {
/* you can set your own image here */
background: transparant url(uploads/images/pfwp_jpg.jpg) no-repeat 0 12px;
display: block;
height: 166px; /* adjust according your image size */
text-indent: -999em; /* this hides the text */
text-decoration:none; /* old firefox would have shown underline for the link, this explicitly hides it */
}

Alvast mijn grote dank voor advies!
Groet,

Anne-Mieke

RonnyK · Post by **RonnyK** » Mon Sep 08, 2008 4:48 am

Heb je een link, om even te kijken....

Wat zijn de permissies op de image? Zie je de foto wel als je de relatieve URL achter je domein-naam tikt?

Ronny

rvdv · Post by **rvdv** » Mon Sep 08, 2008 9:44 am

Je zou ook kunnen proberen om de cache een keer leeg te gooien kan vaak ook helpen. Als dat niet werkt is het verstandig om even een voorbeeld te geven.

Ronny, het zou voor het tonen van een afbeeldingen niet uit mogen maken wat de permissies zijn op een afbeelding.

compufairy · Post by **compufairy** » Mon Sep 08, 2008 11:52 am

Hoi Ronny en rvdv,

Dank voor de snelle reactie! De link: http://www.pwpf.nl. Bij het intoetsen van de relatieve link (ik neem aan dat je de directe link naar de afbeelding bedoelt: http://www.pwpf.nl/uploads/images/pwpf_jpg.jpg) komt de afbeelding netjes op het scherm. De site is nu nog leeg, want ik was zo stom om zonder backup een module te installeren (Blockbuilder) waardoor het admin panel compleet aan diggelen ging, en heb CMSMS opnieuw geïnstalleerd. Al doende leert men, auw.

De rechten op de image zijn 644.

Ik heb de internetcache leeggemaakt, maar dat levert geen resultaat op. Of moet ik in CMSMS ergens de cache legen?

Groet,

Anne-Mieke

Heb je een link, om even te kijken....

Wat zijn de permissies op de image? Zie je de foto wel als je de relatieve URL achter je domein-naam tikt?

Ronny

rvdv
Forum Member
Karma: 0
Offline
posts: 34

Re: logo aangepast volgens de adviezen maar geen resultaat
« Reply #2 on: Today at 05:44 »

--------------------------------------------------------------------------------

Je zou ook kunnen proberen om de cache een keer leeg te gooien kan vaak ook helpen. Als dat niet werkt is het verstandig om even een voorbeeld te geven.

Ronny, het zou voor het tonen van een afbeeldingen niet uit mogen maken wat de permissies zijn op een afbeelding.

rvdv · Post by **rvdv** » Mon Sep 08, 2008 1:34 pm

Je hebt een typ foutje gemaakt in de naam van de afbeelding. In je CSS heb je staan: pfwp_jpg.jpg maar dat moet zijn pwpf_jpg.jpg.

Succes

.

compufairy · Post by **compufairy** » Mon Sep 08, 2008 1:58 pm

Hmmm, ik ben een mega ei geloof ik. Heb het aangepast.

$:-\$ het werkt nog steeds niet. Waar zou het nog meer aan kunnen liggen?

RonnyK · Post by **RonnyK** » Mon Sep 08, 2008 2:03 pm

Kun je je stylesheet nog eens kopieren in deze post, ik zie namelijk de aanroep niet in de source van je pagina verschijnen....

Ronny

compufairy · Post by **compufairy** » Mon Sep 08, 2008 2:18 pm

Hier is de code:

Code: Select all

/*****************
browsers interpret margin and padding a little differently, 
we'll remove all default padding and margins and
set them later on
******************/
* {
margin:0;
padding:0;
}

/*
Set initial font styles
*/
body {
   text-align: left;
   font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
   font-size: 75.01%;
   line-height: 1em;
}

/*
set font size for all divs,
this overrides some body rules
*/
div {
   font-size: 1em;
}

/*
if img is inside "a" it would have 
borders, we don't want that
*/
img {
   border: 0;
}

/*
default link styles
*/
/* set all links to have underline and bluish color */
a,
a:link 
a:active {
   text-decoration: underline;
/* css validation will give a warning if color is set without background color. this will explicitly tell this element to inherit bg colour from parent element */
   background-color: inherit; 
   color: #18507C; 
}

a:visited {
   text-decoration: underline;
   background-color: inherit;
  color: #18507C;                /* a different color can be used for visited links */
}


/* remove underline on hover and change color */
a:hover {
   text-decoration: none;
   background-color: #C3D4DF;
   color: #385C72;
}

/*****************
basic layout 
*****************/
body {
   background-color: #fff;
   color: #333;
   margin:1em;    /* gives some air for the pagewrapper */
}

/* center wrapper, min max width */
div#pagewrapper {
   border: 1px solid black;
   margin: 0 auto;       /* this centers wrapper */
   max-width: 80em;   /* IE wont understand these, so we will use javascript magick */
   min-width: 60em;
   background-color: #fff;;
   color: black;
}


/*** header ***
we will hide text and replace it with a image
we need to assign a height for it so that the image wont cut off
*/
div#header {
   height: 166px;    /* adjust according your image size */
   background: transparant url(uploads/images/pwpf_jpg.jpg) no-repeat 0 12px;           
}

div#header h1 a {
/* you can set your own image here */
   background: transparant url(uploads/images/pwpf_jpg.jpg) no-repeat 0 12px; 
   display: block;
   height: 166px;             /* adjust according your image size */
   text-indent: -999em;  /* this hides the text */
   text-decoration:none; /* old firefox would have shown underline for the link, this explicitly hides it */
}

/* position for the search box */
div#search {
   float: right;
   width: 27em;    /* enough width for the search input box */
   text-align: right;
   padding: 0.6em 0 0.2em 0;
   margin: 0 1em;
}

div.breadcrumbs {
   padding: 1em 0 1.2em 0; /* CSS short hand rule first value is top then right, bottom and left */
   font-size: 90%;        /* its good to set fontsizes to be relative, this way viewer can change his/her fontsize */
   margin: 0 1em;        /* css shorthand rule will be opened to be "0 1em 0 1em" */
   border-bottom: 1px dotted #000;
}

 div.breadcrumbs span.lastitem { 
   font-weight:bold; 
 } 

 div#content {
   margin: 1.5em auto 2em 0;   /* some air above and under menu and content */
}


div#main {
   margin-left: 29%; /* this will give room for sidebar to be on the left side, make sure this space is bigger than sidebar width */
   margin-right: 2%; /* and some air on the right */
}

div#sidebar {
   float: left;        /* set sidebar on the left side. Change to right to float it right instead. */
   width: 26%;     /* sidebar width, if you change this please also change #main margins */
   display: inline;  /* FIX IE double margin bug */
   margin-left: 0;
}

div#footer {
   clear: both;       /* keep footer below content and menu */
   color: #fff;
   background-color: #385C72; /* same bg color as in header */
}

div#footer p {
   font-size: 0.8em;
   padding: 1.5em;       /* some air for footer */
   text-align: center;  /* centered text */
   margin: 0;
}

div#footer p a {
   color: #fff; /* needed becouse footer link would be same color as background otherwise */
}

/* as we hid all hr for accessibility we create new hr with extra div element */
div.hr {
   height: 1px;
   padding: 1em;
   border-bottom: 1px dotted black;
   margin: 1em;
}

/* relational links under content */
div.left49 {
  width: 49%; /* 50% for both left and right might lead to rounding error on some browser */
}

div.right49 {
  float: right;
  width: 49%;
  text-align: right;
}




/********************
CONTENT STYLING
*********************/
div#content {

}

/* HEADINGS */
div#content h1 {
   font-size: 2em; /* font size for h1 */
   line-height: 1em;
   margin: 0;
}
div#content h2 {
	color: #294B5F; 
	font-size: 1.5em; 
	text-align: left; 
/* some air around the text */
	padding-left: 0.5em;
	padding-bottom: 1px;
/* set borders around header */
	border-bottom: 1px solid #e7ab0b; 
	border-left: 1.1em solid #e7ab0b; 
        line-height: 1.5em;
/* and some air under the border */
        margin: 0 0 0.5em 0;
}
div#content h3 {
   color: #294B5F; 
   font-size: 1.3em;
   line-height: 1.3em;
   margin: 0 0 0.5em 0;
}
div#content h4 {
   color: #294B5F; 
   font-size: 1.2em;
   line-height: 1.3em;
   margin: 0 0 0.25em 0;
}
div#content h5 {
   color: #294B5F; 
   font-size: 1.1em;
   line-height: 1.3em;
   margin: 0 0 0.25em 0;
}
h6 {
   color: #294B5F; 
   font-size: 1em;
   line-height: 1.3em;
   margin: 0 0 0.25em 0;
}
/* END HEADINGS */

/* TEXT */
p {
   font-size: 1em;
   margin: 0 0 1.5em 0; /* some air around p elements */
   line-height: 1.4em;
   padding: 0;
}

blockquote {
   border-left: 10px solid #ddd;
   margin-left: 10px;
}
strong, b {
/* explicit setting for these */
   font-weight: bold;
}
em, i {
/* explicit setting for these */
   font-style:italic;
}

/* Wrapping text in <code> tags. Makes CSS not validate */
code, pre {
 white-space: pre-wrap;       /* css-3 */
 white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
 white-space: -pre-wrap;      /* Opera 4-6 */
 white-space: -o-pre-wrap;    /* Opera 7 */
 word-wrap: break-word;       /* Internet Explorer 5.5+ */
 font-family: "Courier New", Courier, monospace;
 font-size: 1em;
}

pre {
   border: 1px solid #000;  /* black border for pre blocks */
   background-color: #ddd;
   margin: 0 1em 1em 1em;
   padding: 0.5em;
   line-height: 1.5em;
   font-size: 90%;


}

/* Separating the divs on the template explanation page, with some bottom-border */
div.templatecode {
  margin: 0 0 2.5em;
}

/* END TEXT */

/* LISTS */
/* lists in content need some margins to look nice */
div#main ul,
div#main ol,
div#main dl {
   font-size: 1.0em;
   line-height: 1.4em;
   margin: 0 0 1.5em 0;
}

div#main ul li,
div#main ol li {
   margin: 0 0 0.25em 3em;
}

/* definition lists topics on bold */
div#main dl dt {
   font-weight: bold;
   margin: 0 0 0 1em;
}
div#main dl dd {
   margin: 0 0 1em 1em;
}

div#main dl {
  margin-bottom: 2em;
  padding-bottom: 1em;
  border-bottom: 1px solid #c0c0c0;
}


/* END LISTS */

rvdv · Post by **rvdv** » Mon Sep 08, 2008 2:47 pm

Heb het zelf ook even getest en je moet transparant voor je url() weghalen in de #header opmaak.

Dan werkt het wel

(bij mij dan).

compufairy · Post by **compufairy** » Mon Sep 08, 2008 2:56 pm

Dank dank dank!!! Het werkt!

Een hele blije Anne-Mieke