Get simple - zmiana wygladu headera

**DemonKaNE** · 20.05.2019, 15:10

Sprawa wyglada tak, ze chcialbym czerwony header:
[Obrazek: D2FFyhR.png]

Zmienić na inny kolor, lub obraz, np. https://ak6.picdn.net/shutterstock/video...humb/1.jpg

Szablon:

<?php if(!defined('IN_GS')){ die('you cannot load this page directly.'); }

/****************************************************

*

* @File: template.php

* @Package: GetSimple

* @Action: Cardinal theme for GetSimple CMS

*

*****************************************************/

?>

<!DOCTYPE html>

<html>

<head>

<!-- Site Title -->

<title><?php get_page_clean_title(); ?> &lt; <?php get_site_name(); ?></title>

<?php get_header(); ?>

<meta name="robots" content="index, follow" />

<meta charset="utf-8">

<link rel="stylesheet" type="text/css" href="<?php get_theme_url(); ?>/style.css" media="all" />

</head>

<body id="<?php get_page_slug(); ?>" >

<div id="wrapper">

<div id="header">

<ul id="nav">

<?php get_navigation(return_page_slug()); ?>

</ul>

<span class="logo2"><?php get_site_name(); ?></span>

<a class="logo" href="<?php get_site_url(); ?>"><?php get_site_name(); ?></a>

</div><!-- end header -->

<div id="content">

<h1><?php get_page_title(); ?></h1> 

<div id="page-content">

<div class="page-text">

<?php get_page_content(); ?>

<p class="page-meta">Published on &nbsp;<span><?php get_page_date('F jS, Y'); ?></span></p>

</div>

</div>

</div> 

<div id="sidebar">

<div class="section">

<?php get_component('sidebar'); ?>

</div>

<div class="section credits">

<p><?php echo date('Y'); ?> - <strong><?php get_site_name(); ?></strong></p>

<p>

Cardinal Theme by <a href="http://www.cagintranet.com" >Cagintranet</a><br />

<?php get_site_credits(); ?>

</p>

</div>

</div>

<div class="clear"></div>

<?php get_footer(); ?>

</div><!-- end wrapper -->

</body>

</html>

CSS szablonu:

/** GLOBAL RESETS **/

:link,:visited {text-decoration:none}

h1,h2,h3,h4,h5,h6,pre,code {font-size:1em;font-weight:400;}

ul,dl,dt,dd,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input {margin:0; padding:0}

a img,:link img,:visited img {border:none}

/** GLOBAL SETS **/

.clear {clear:both;}

.hidden {display:none;}

body {margin:0 0 50px 0;font-size:13px;color:#222;font-family:arial,lucida,tahoma, helvetica, verdana;background:#FFF url(images/bg.png) top repeat-x;text-align:center;}

a:link, a:visited {color:#BA0000;text-decoration:underline;}

a:hover, a:focus {color:#1a1a1a;text-decoration:underline;}

#wrapper {width:925px;margin-right:auto;margin-left:auto;}

#header {position:relative;height:180px;}

#homepage #header {position:relative;height:415px;}

#header #nav {position:absolute;top:10px;left:0;list-style:none;}

#header #nav li {float:left;margin:0 10px 0 0;font-size:13px;text-transform:uppercase;font-weight:bold;}

#header #nav li a {display:block;line-height:30px;padding:0 10px;}

#header #nav li a:link, #header #nav li a:visited {border:1px solid #D23939;color:#E17979;text-decoration:none;}

#header #nav li a:hover, #header #nav li a:focus {color:#FFFFFF;text-decoration:none;}

#header #nav li.current a  {border:1px solid #FFC4C4;color:#FFFFFF;text-decoration:none;}

#header a.logo:link, #header a.logo:visited, #header a.logo:hover {position:absolute;top:68px;left:0;

color:#fff;

font-size:52px;

text-transform:uppercase;

font-family:Arial;

letter-spacing:-2px;

text-decoration:none;

}

#header span.logo2 {position:absolute;top:70px;left:2px;

color:#7C1B1B;

font-size:52px;

text-transform:uppercase;

font-family:Arial;

letter-spacing:-2px;

}

#content {text-align:left;}

#content h1 {font-size:40px;font-family:arial;line-height:40px;letter-spacing:-2px;margin:25px 0 20px 0;}

#content h2 {font-size:25px;font-family:arial;line-height:37px;letter-spacing:-1px;margin:25px 0 10px 0;}

#content h3 {font-family:arial;font-size:18px;color:#1a1a1a;margin:25px 0 10px 0;}

#content h4 {font-family:arial;font-size:16px;color:#1a1a1a;margin:25px 0 10px 0;}

#content h5 {font-family:arial;font-size:14px;color:#1a1a1a;margin:25px 0 10px 0;}

#content h6 {font-family:arial;font-size:10px;color:#1a1a1a;margin:25px 0 10px 0;}

#content #page-content {float:left;width:575px}

.page-meta {line-height:40px;text-transform:uppercase;color:#999;font-size:11px;border-top:1px dotted #ccc;padding-top:15px;margin-top:15px;}

.page-meta span {text-transform:none;color:#BA0000;font-size:15px;font-family:georgia;}

#content .page-text {font-size:14px;line-height:22px;margin-bottom:50px;}

#content .page-text p, #content .page-text ul, #content .page-text ol {margin:0 0 22px 0;}

#content .page-text ul, #content .page-text ol {margin-left:25px;}

#content .page-text ul ul, #content .page-text ol ul, #content .page-text ul ol, #content .page-text ol ol {

margin:0 0 0 25px;

}

#content .page-text blockquote {

margin:0 0 22px 20px;

line-height: 19px;

font-size:13px;

color:#666;

font-style:italic;

border-left:2px solid #ccc;

padding:0 0 0 15px;

}

#content code {border:1px dotted #ececec;padding:2px;font-family: Consolas, Monaco, "Courier New", Courier, monospace;font-size: 12px;background:#f9f9f9;color:#000;}

#content pre code {line-height:17px;padding:15px;border:1px dotted #ececec;font-family: Consolas, Monaco, "Courier New", Courier, monospace;font-size: 12px;background:#f9f9f9;color:#000;margin-bottom:22px;display:block;}

#content .page-text img {margin:0 0 20px 0;border:1px solid #1a1a1a;}

#sidebar {width:300px;float:right;border:1px solid #ccc;background:#f6f6f6;margin-bottom:50px;}

.section {padding:30px 20px 20px 20px;text-align:left;}

.section p, .section ul, .section ol {line-height:20px;margin:0 0 20px 0;}

.section ul, .section ol {margin-left:20px;}

.section ul ul, .section ol ul, .section ul ol, .section ol ol {

margin:0 0 0 20px;

}

.section h2 {color:#BA0000;font-size:22px;font-family:arial;line-height:22px;letter-spacing:-1px;margin:0 0 15px 0;padding:0;}

.section h3 {color:#BA0000;font-family:arial;font-size:19px;margin:0 0 10px 0;}

.section h4 {color:#BA0000;font-family:arial;font-size:15px;margin:0 0 10px 0;}

.section h5 {color:#BA0000;font-family:arial;font-size:13px;margin:0 0 10px 0;}

.section h6 {color:#BA0000;font-family:arial;font-size:10px;margin:0 0 10px 0;}

.section blockquote {

margin:0 0 20px 20px;

line-height: 19px;

font-size:12px;

color:#666;

font-style:italic;

border-left:2px solid #ccc;

padding:0 0 0 15px;

}

.section code {border:1px solid #ececec;padding:2px;font-family: Consolas, Monaco, "Courier New", Courier, monospace;font-size: 12px;background:#f9f9f9;color:#000;}

.section pre code {line-height:17px;padding:15px;border:1px solid #ececec;font-family: Consolas, Monaco, "Courier New", Courier, monospace;font-size: 12px;background:#f9f9f9;color:#000;margin-bottom:22px;display:block;}

.credits {font-size:11px;text-transform:uppercase;color:#666;padding-top:15px;margin-top:30px;border-top:1px dotted #ccc;}

.credits p {margin:0 0 0 0;line-height:16px;padding:5px 0 0 0;}

.credits a:link, .credits a:visited {color:#666;}

.credits a:hover {color:#333}

**b360** · (Ten post był ostatnio modyfikowany: 21.05.2019, 21:31 przez Łukasz.)

Potrzeba demo. Z samej grafiki, to [..] można odczytać

Prawdopodobnie, to czerwone co widzisz, to background image dla body.

Łukasz napisał 21.05.2019, 21:31:
Zważaj na słownictwo

**DemonKaNE** · 21.05.2019, 20:11

(21.05.2019, 17:58)b360 napisał(a): Potrzeba demo. Z samej grafiki, to ch*ja można odczytać

Prawdopodobnie, to czerwone co widzisz, to background image dla body.

Strona jest na silnikach mojej szkoły, nie ma opcji. Ale jak już tak bardzo potrzebujesz to wgraj sobie get simple'a i odpal drugi ze standardowych stylów.

**b360** · (Ten post był ostatnio modyfikowany: 21.05.2019, 22:06 przez b360.)

Tu demo dla zainteresowanych: https://s1.demo.opensourcecms.com/s/52

Tak jak myślałem

body ma narzucony background, a obrazek jest taki: https://s1.demo.opensourcecms.com/getsim...TAIUA.webp czyli nawet z tym 'odcięciem'

Także wystarczy, że wrzucisz inny obrazek o tych samych wymiarach lub wrzucisz zupełnie inny i edytujesz to:

body {margin:0 0 50px 0;font-size:13px;color:#222;font-family:arial,lucida,tahoma, helvetica, verdana;background:#FFF url(images/bg.png) top repeat-x;text-align:center;}

https://developer.mozilla.org/pl/docs/We...background
https://developer.mozilla.org/pl/docs/We...ound-color
https://developer.mozilla.org/pl/docs/We...ound-image

**Bouli** · 21.05.2019, 22:14

czemu sobie nie zbadasz tego header
w oryginale to jest gssw_master.css

#gssw-header {

 background: transparent url('../images/gssw-header-bg.png') top left repeat-x;

 font-family:arial, helvetica, sans-serif;

 width:100%;

 min-width:1000px;

}

Dołącz do zespołu ekspertów! Backend lub Frontend Developer?

Get simple - zmiana wygladu headera

DemonKaNE

b360

DemonKaNE

b360

Bouli

Użytkownicy przeglądający ten wątek:

Zaloguj się
Login:
Hasło:	Nie pamiętam hasła
	Zapamiętaj mnie