Css help σε joomla template

Ας μάθουμε πως να κάνουμε τις σελίδες μας με στιλ. Τα Cascading Style Sheets είναι ο τρόπος για να το επιτύχουμε.

Συντονιστές: WebDev Moderators, Super-Moderators

Απάντηση
Άβαταρ μέλους
Insurer
Δημοσιεύσεις: 391
Εγγραφή: 13 Απρ 2009 21:40
Τοποθεσία: Ακροκεραύνεια

Css help σε joomla template

Δημοσίευση από Insurer » 28 Οκτ 2010 01:33

Καλησπέρα,
θέλω παρακαλώ να μου πείτε τις αλλαγές που πρεπει να κάνω στο template.css ώστε το template να είναι στο κέντρο και να κάνει auto fit στην σελίδα γιατι στο default ξεκινάει η σελίδα απο αριστερά χωρίς κενό και ξεχιλείζει προς τα δεξιά: δείτε φώτο
Εικόνα

και μια εικόνα απο το πως θέλω να το κάνω:
Εικόνα

template.css

Κώδικας: Επιλογή όλων

@charset "utf-8";
/*Code by Juergen Koller
author url: http//www.lernvid.com
copyright: Lernvid.com - Lernvideos Tutorials Templates PSD-Files und mehr...
*/
#left_border {
	width: 100%;
	text-align: left;
	background-repeat: repeat-y;
	background-color: #000;
	margin: 0 auto;
    }  
#right_border {
	background-repeat: repeat-y;
	background-position: right;
}
#bottom {
	background-repeat: repeat-x;
	background-position: bottom;
	width: 1100px;
}
#bottom_right {
	background-repeat: no-repeat;
	background-position: bottom right;
}
#bottom_left {
	background-repeat: no-repeat;
	background-position: bottom left;
}
#header  {
	background: #000;
	height: 30px;
	background-image: url(../images/header_bg_01.jpg);
	line-height: 30px;
	padding: 0 15px 0 15px;
    } 
 
#date {
	font-size: 11px;
	float: left;
	color: #fff;
	font-weight: bold;
	margin-right: 20px;
}
#pathway {
	float: left;
	color: #fff;
	font-weight: bold;
	font-size: 11px;
	height: 36px;
	line-height: 36px;
}
#pathway a {
	color: #cccccc;
	height: 36px;
	line-height: 36px;
}
#search_out {
	float: right;
	background-image: url(../images/search.jpg);
	background-repeat: no-repeat;
	width: 197px;
	height: 36px;
}
#search {
	margin: 7px 0 7px 45px;
}
#search input, 
#search .inputbox {
	float: left;
	margin: 0;
	background: none;
	border: none;
	padding: 0;
}
#banner_out {
	background-repeat: repeat-x;
	height: 275px;
	width: 100%;
}
#banner_in {
	float: left;
	color: #000;
	height: 275px;
	font-size: 40px;
	background-repeat: no-repeat;
	background-position: left;
	width: 100%;
	font-family: Verdana, Arial, sans-serif;
}
#banner {
	float: right;
	padding: 30px 30px 0px 0px;
}
.sitetitle {
	float: left;
	text-indent: 70px;
	padding-top: 200px;
	color:red;
	font-family: Tahoma, Helvetica, sans-serif;
}
#topmenu_out {
	height: 38px;
	background-repeat: repeat-x;
}
#topmenu_left {
	height: 38px;
	background-repeat: no-repeat;
}
#topmenu_right {
	height: 38px;
	background-repeat: no-repeat;
	background-position: right;
}
#topmenu {
	height: 33px;
	color: #000;
	text-align: left;
	padding: 4px 27px 0px 27px;
	float: left;
}
#topmenu ul, 
#topmenu li {
	display: inline;
	padding: 0px;
	margin: 0px;
	list-style-type: none;
}
#topmenu a {
	color: #7B4612;
	float: left;
	height: 33px;
	border: none;
	background: none;
	font-size: 12px;
	font-family: Verdana, Arial, Tahoma;
	padding: 0px 14px;
	line-height: 33px;
	font-weight: bold;
}
#topmenu  a:hover, 
#topmenu #active_menu, 
#topmenu li#current a {
	text-decoration: none;
	background-image: url(../images/topmenu_over.jpg);
	color: #B21A1A;
	background-repeat: repeat-x;
}
#container {
	padding-bottom: 10px;
}
#maincontent {
	padding: 0px 16px;
}
#left_out {
	width: 188px;
	float: left;
	padding: 0;
	margin: 0;
}
#right_out  {
	width: 182px;
	float: right;
	padding: 0;
	margin: 0;
}
#left_out ul, #left_out li, #right_out ul, #right_out li {
	list-style-type: none;
	padding: 0;
	margin: 0;
}
#left_out ul.menu li a, 
#left_out ul.menu li#current a, 
#left_out a.mainlevel,
#right_out ul.menu li a, 
#right_out ul.menu li#current a, 
#right_out a.mainlevel {
	display: block;
	height: 25px;
	line-height: 25px;
	background-repeat: no-repeat;
	background-position: left;
	width: 172px;
	font-size: 12px;
!important;
	font-weight: normal;
	text-indent: 20px;
!important;
}
#left_out ul.menu a:hover, 
#right_out ul.menu a:hover,
#left_out a.mainlevel:hover, 
#right_out a.mainlevel:hover, 
#left_out #active_menu, 
#right_out #active_menu,
#left_out ul.menu li#current a,
#right_out ul.menu li#current a {
	background-image: url(../images/mainlevel_over.gif);
	text-decoration: none;
	background-repeat: no-repeat;
	background-position: left;
	color: #ffffff; !important;
}
#left_out a.sublevel, 
#left_out ul.menu li#current li a,
#left_out ul.menu li li a,
#left_out ul.menu li li#current a,
#left_out ul.menu li li#current li a,
#left_out ul.menu li li li a,
#right_out a.sublevel, 
#right_out ul.menu li#current li a,
#right_out ul.menu li li a,
#right_out ul.menu li li#current a,
#right_out ul.menu li li#current li a,
#right_out ul.menu li li li a {
	background-repeat: no-repeat;
	height: 20px;
	line-height: 20px;
	background-position: left;
	text-indent: 20px;
!important;
	border: none;
	display: block;
}
#left_out a.sublevel#active_menu,
#right_out a.sublevel#active_menu,
#left_out a.sublevel:hover,
#right_out a.sublevel:hover,
#left_out ul.menu li#current li a,
#left_out ul.menu li li#current a,
#left_out ul.menu li li#current li a,
#right_out ul.menu li#current li a,
#right_out ul.menu li li#current a,
#right_out ul.menu li li#current li a,
#left_out ul.menu li#current a:hover,
#right_out ul.menu li#current a:hover,
#left_out ul.menu li li a:hover,
#right_out ul.menu li li a:hover{
	text-decoration: none;
	background-repeat: no-repeat;
	background-position: left;
	color: #ffffff; !important;
}
#left_out .module, 
#right_out .module, 
#left_out .moduletable, 
#right_out .moduletable,
#left_out .module_menu, 
#right_out .module_menu, 
#left_out .module_text,
#right_out .module_text {
	background-repeat: repeat-y;
	margin-top: 5px;
}
#left_out .module div, 
#right_out .module div, 
#left_out .moduletable div, 
#right_out .moduletable div,
#left_out .module_menu div, 
#right_out .module_menu div,
#left_out .module_text div,
#right_out .module_text div {
	background-position: bottom;
	background-repeat: no-repeat;
	width: 182px
}
#left_out .module div div, 
#right_out .module div div, 
#left_out .moduletable div div, 
#right_out .moduletable div div,
#left_out .module_menu div div, 
#right_out .module_menu div div,
#left_out .module_text div div,
#right_out .module_text div div {
	background-position: top;
	background-repeat: no-repeat;
}
#left_out .module div div div, 
#right_out .module div div div, 
#left_out .moduletable div div div, 
#right_out .moduletable div div div,
#left_out .module_menu div div div, 
#right_out .module_menu div div div,
#left_out .module_text div div div,
#right_out .module_text div div div{
	background: none;
	padding: 5px 5px 10px 5px;
	overflow: hidden;
	width: 172px;
}
#left_out .module div div div div, 
#right_out .module div div div div, 
#left_out .moduletable div div div div, 
#right_out .moduletable div div div div,
#left_out .module_menu div div div div, 
#right_out .module_menu div div div div,
#left_out .module_text div div div div,
#right_out .module_text div div div div {
	padding: 0;
}
#left_out h3, 
#right_out h3 {
	height: 35px;
	width: 172px;
	background-repeat: no-repeat;
	color: #7B4612;
	line-height: 35px;
	text-indent: 20px;
	padding: 0;
	margin: 0 0 5px 0;
	font-size: 14px;
	font-weight: bold;
}
#content_outleft, 
#content_outmiddle, 
#content_outright {
	margin: 0 0 10px 0;
	padding-top: 5px;
}
#content_outleft {
	margin: 0 0 0 188px;
}
#content_outmiddle {
	margin: 0 188px;
}
#content_outright {
	margin: 0 188px 0 0;
}
#content {
	background-repeat: repeat-x;
	background-position: bottom;
	width: 100%;
}
#content_border_left {
	background-repeat: repeat-y;
	background-position: top left;
}
#content_border_right {
	background-repeat: repeat-y;
	background-position: top right;
}
#content_bottom_right {
	background-repeat: no-repeat;
	background-position: bottom right;
}
#content_bottom_left {
	background-repeat: no-repeat;
	background-position: bottom left;
	padding: 3px 5px 5px 5px;
}
.user_bg, 
.user_left, 
.user_right {
	height: 148px;
}
.user_bg {
	margin: 0 0 10px 0;
	padding: 0;
	background-repeat: repeat-x;
	width: 100%;
}
.user_left {
	background-repeat: no-repeat;
	background-position: left top;
}
.user_right {
	background-repeat: no-repeat;
	background-position: right top;
}
.user_bg .topmodule_usertwo {
	width: 45%;
	height: 140px;
	margin: 0px;
	float: left;
	padding: 0px;
}
.user_bg .topmodule_userone {
	width: 100%;
	height: 140px;
	margin: 0px;
	float: left;
	padding: 0px;
}
.user_bg ul, 
.user_bg li {
	margin: 0px;
	padding: 0px;
	list-style-type: square;
}
.user_bg th, 
.user_bg h3 {
	height: 28px;
	line-height: 28px;
	font-size: 14px;
	color: #a26830;
	padding: 0px 5px;
	font-family: Arial, Helvetica, sans-serif;
	margin: 0 0 5px 0;
	font-weight: normal;
}
.user_bg .user_inside {
	margin: 5px;
	height: 136px;
	overflow: hidden;
}
.user_bg .user_inside1 {
	margin: 5px 5px 5px 15px;
	height: 136px;
	overflow: hidden;
}
.separator {
	width: 2%;
	min-width: 22px;
	height: 140px;
	float: left;
	background-repeat: no-repeat;
	background-position: top center;
}
#user_bottom {
	padding: 0px 16px;
	margin-top: 5px;
}
#user_bottom .user_bg {
	margin: 0;
}
.user_bg .bottom_user, .user_bg .bottom_user1, .user_bg .bottom_user2, .user_bg .bottom_user3 {
	width: 30%;
	height: 140px;
	margin: 0px;
	float: left;
	padding: 0px;
}
.user_bg .bottom_user1 {
	width: 100%;
}
.user_bg .bottom_user2 {
	width: 45%;
}
.user_bg .bottom_user3 {
	width: 30%;
}
.user_bg .bottom_user1 {
	width: 30%;
	height: 140px;
	margin: 0px;
	float: left;
	padding: 0 0 0 15px;
}
#footer {
	background-color: #000;
	background-image: url(../images/footer.jpg);
	background-repeat: no-repeat;
	color: #e9790d;
	text-align: center;
	padding: 0px 0px;
	font-family: Tahoma, Arial, Verdana;
	height: 100px;
}
#copy {
	float: center;
	font-size: 11px;
	padding-left: 10px;
}
#othermenu {
	float: center;
	overflow: hidden;
	font-size: 10px;
}

#othermenu_in ul, 
#othermenu_in li {
	list-style-type: none;
	margin: 0;
	padding: 0;
	display: inline;
}
#othermenu_in {
	margin-right: -2px;
	float: center;
}
#othermenu_in a {
	color: #C2EFFC;
	border-right: 1px solid #8B8B8B;
	padding: 0px 20px;
}
.clr {
	clear:both;
}
body  {
	font: 12px Tahoma, Verdana, Arial, Helvetica, sans-serif;
	background: #000;
	background-image: url(../images/bg_01.jpg);
	background-repeat:repeat-x;
	background-position: center top;
	margin: auto;
	padding: 0;
	text-align: center;
	color: #ffffff;
        width: 1100px;
}
p, td, tr {
	font-size: 11px;
	padding: 0;
	margin: 0;
	font-family: Tahoma, Arial, Verdana;
}
ul {
	margin: 0px;
	padding: 0px 0px 0px 18px;
	list-style-type: square;
} 
a:link, a:visited {
	color: #ff0000;
	text-decoration: none;
}
a:hover {
	text-decoration: underline;
}
.button {
	color: #841010;
	padding: 3px 5px;
	background-image: url(../images/button.jpg);
	background-repeat: repeat-x;
	background-color: #8B0000;
	margin: 5px 0px;
	border: 1px solid #451414;
	font-family: Tahoma, Arial, Verdana;
	font-size: 12px;
	font-weight: bold;
}
.inputbox, input {
	border: 1px solid #cccccc;
}
.input, img {
	border: none;
}
.search {}
a.readon {
	background-image: url(../images/readon.gif);
	background-repeat: no-repeat;
	height: 20px;
	width: 102px;
	color: #b21a1a;
	float: left;
	text-indent: 25px;
	line-height: 20px;
	margin: 10px 0 0 0;
}
.back_button {
	background-image: url(../images/backbutton.gif);
	height: 20px;
	line-height: 20px;
	width: 102px;
	text-indent: 25px;
	color: #b21a1a;
	font-weight: bold;
	font-size: 10px;
	margin-top: 5px;
}
.back_button a:link {
	color: #000;
}
.componentheading {
	background-image: url(../images/componentheading.jpg);
	height: 31px;
	line-height: 31px;
	padding: 0px 10px;
	color: #d90000;
	font-weight: bold;
	font-size: 14px;
	font-family: Tahoma, Helvetica, sans-serif;
}
.contentheading, .contentheading a {
	font-size: 22px;
	font-family: Tahoma, Arial, sans-serif;
	color: #330000;
} 
.contentdescription {
	padding: 10px;
} 
.sectiontableheader {
	padding: 3px 5px;
	background-color: #666;
	color: #000;
	font-size: 15px;
	color: #000;
}
.sectiontableentry1, 
.sectiontableentry2 {
	background-repeat: repeat-x;
	height: 26px;
	line-height: 26px;
	font-size: 12px;
	text-indent: 5px;
	background-position: bottom;
	background-color: #000;
}
.createdate, 
.small {
	font-size: 10px;
	color: #999999;
}
το zip με το template http://www.joomla24.com/remository/Down ... blo_3.html

Άβαταρ μέλους
Nemesis_Elite
Δημοσιεύσεις: 348
Εγγραφή: 14 Μαρ 2009 22:51
Τοποθεσία: athens

Css help σε joomla template

Δημοσίευση από Nemesis_Elite » 28 Οκτ 2010 17:35

αν και δεν κατάλαβα...
το body έχει ανάλυση 1100px, άλλαξε το σε ότι θες.

Κώδικας: Επιλογή όλων

body {
width: 975px;
} 
...ψάξου λίγο γιατί αλλιώς δε θα μάθεις, είναι απλά πράματα αυτά...

Άβαταρ μέλους
Insurer
Δημοσιεύσεις: 391
Εγγραφή: 13 Απρ 2009 21:40
Τοποθεσία: Ακροκεραύνεια

Css help σε joomla template

Δημοσίευση από Insurer » 28 Οκτ 2010 19:19

το έψαξα αρκετά πίστεψέ με, ακομα και τα tutorials αλλά είναι μπέρδεμα.
Αν αλλάξω το body δεν πρεπει να αλλάξω και το bottom ?

Άβαταρ μέλους
Nemesis_Elite
Δημοσιεύσεις: 348
Εγγραφή: 14 Μαρ 2009 22:51
Τοποθεσία: athens

Css help σε joomla template

Δημοσίευση από Nemesis_Elite » 28 Οκτ 2010 19:24

σωστά οτιδήποτε πέρνει 1100px άλλαξε το
ή μπορείς να βάλεις και 100% (αντι για 1100px )
για να μην ασχολήσε με px και να βγαίνει ακριβώς στο 100% της σελίδας ανεξαρτήτος ανάλυσης οθόνης.

Άβαταρ μέλους
Insurer
Δημοσιεύσεις: 391
Εγγραφή: 13 Απρ 2009 21:40
Τοποθεσία: Ακροκεραύνεια

Css help σε joomla template

Δημοσίευση από Insurer » 29 Οκτ 2010 02:22

Βασικά θέλω το template να είναι στο κέντρο και να έχει καποια κενά αριστερά πάνω και κάτω απο το 2ο template

Απάντηση

Επιστροφή στο “CSS - Cascading Style Sheets”

Μέλη σε σύνδεση

Μέλη σε αυτήν τη Δ. Συζήτηση: Δεν υπάρχουν εγγεγραμμένα μέλη και 1 επισκέπτης