Vấn đề về background image trong joomla

Các thắc mắc, hướng dẫn về thiết kế Tempalte cho Joomla

Moderator: hungkhanggl

Forum rules
Locked
nghiadang24
Joomla! Fledgling
Joomla! Fledgling
Posts: 4
Joined: Wed Oct 26, 2011 1:33 am

Vấn đề về background image trong joomla

Post by nghiadang24 » Wed Oct 26, 2011 1:37 am

Xin chỉ giúp mình cách chỉnh background sử dụng image tự động co giản trong joomla nhé. ???
Top
tomytran
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 241
Joined: Mon Dec 14, 2009 1:52 pm
Contact:
Contact tomytran

Re: Vấn đề về background image trong joomla

Post by tomytran » Wed Oct 26, 2011 4:13 am

Tìm đoạn <head> ... </head> của template, detect browser's dimension bằng javascript. Với mỗi dimesion thì dùng 1 image khác nhau làm background và nhét vào thẻ <style> ... </style>.

Good luck.
TOHA GROUP [ https://toha.us ]

Nghiền ĐỊA ỐC [ Trang hỗ trợ thông tin về Bất Động Sản ]
Top
nghiadang24
Joomla! Fledgling
Joomla! Fledgling
Posts: 4
Joined: Wed Oct 26, 2011 1:33 am

Re: Vấn đề về background image trong joomla

Post by nghiadang24 » Wed Oct 26, 2011 5:30 am

anh có thể viết một đoạn code demo cho em tham khảo được không?
Top
nghiadang24
Joomla! Fledgling
Joomla! Fledgling
Posts: 4
Joined: Wed Oct 26, 2011 1:33 am

Re: Vấn đề về background image trong joomla

Post by nghiadang24 » Wed Oct 26, 2011 6:25 am

Đã thay đổi được background như ý muốn với các bước sau:
1. chúng ta sẽ sử dụng mod Ramdom Background dowload tại đây http://extensions.joomla.org/ex ... ating/6054
2. trong phần tham số ta sẽ chọn Background image là hình muốn làm bg,
kế tiếp trong phần Additional CSS ta chỉ cần coppy đoạn css sau đây và trỏ đường truyền đến image cần chỉnh như sau:

Code: Select all

/********************************************/
/*** *********CSS file1 working 1 ***********/
/*******************************************/

html {
height: 100%;

}

body{
margin:0;
padding:0;
text-align:center;
background:#000000 url(../images/bg.jpg) 0 0 repeat;
font-size:13px;
color:#000000;
font-family: cambria, tahoma, arial , sans-serif;
font-weight:normal;
background-attachment:fixed;

}

/*text*/
p {
font-size: 100%;

}

h1 {
font-size: 200%;

}

h2 {
font-size: 150%;

}

h3 {
font-size: 125%;

}

h4, h5, h6 {
font-size: 100%;

}

/* hyperlinks*/
a:link, a:visited {
text-decoration:none;
color:#ffffff;
font-weight:bold;

}

a:hover {
color:#ff7f00;

}

ul {
margin:0;
padding-left:20px;

}

li {
list-style-type:circle;
background:transparent;
margin: 4px;

}

img {
border:none;
margin:0px 0px;
padding:0;

}

img .caption {
text-align: left;

}

.highlight{
background:#ff7f00;
padding: 0px 2px 0px 2px;
color:#ffffff;

}

.button {
background:#ff7f00;
border:none;
color:#fff;
font-weight:bold;
padding:4px;

}

.inputbox {
color:#000000;
background:#ffffff;
border:none;
padding:4px;
font-weight:bold;

}

.pagewidth{
width:850px;
text-align:center;
background:transparent;
margin-left:auto;
margin-right:auto;
margin-top:0px;
margin-bottom:0px;

}

.pagewidth2{
width:850px;
text-align:center;
background:transparent;
margin-left:auto;
margin-right:auto;
margin-top:0px;
margin-bottom:0px;
position:relative;

}

fieldset {
margin:0px 5px 5px 5px;
padding:5px;
border:1px dashed #ffffff;

}

/****MODULE SEARCH/LOGIN/REGISTER********/
#tool {
float:left;
width:100%;
height:45px;
background:#000;
border-bottom: 1px solid #c0bbbb;

}

#datetime {
float:left;
padding:0;
margin-top:7px;
text-align:center;
width:220px;
font-size:12px;
color:#fff;

}

#tool-w {
float:right;
width:850px;
height:25px;
margin-top:5px;

}

a.login-switch {
float:right;
background: url(../images/tool.jpg) 0 0 no-repeat;
color: #fff;
width:72px;
margin-left:8px;
padding:6px;
 

}

a.register-switch {
float:right;
background: url(../images/tool.jpg) 0 0 no-repeat;
color: #fff;
width:72px;
margin-left:8px;
padding:6px;

}

a.search-switch {
float:right;
background: url(../images/tool.jpg) 0 0 no-repeat;
color: #fff;
width:72px;
margin-left:8px;
padding:6px;

}

a.login-switch:hover {
background: url(../images/tool-hover.jpg) 0 0 no-repeat;
color:#000;

}

a.register-switch:hover {
background: url(../images/tool-hover.jpg) 0 0 no-repeat;
color:#000;

}

a.search-switch:hover {
background: url(../images/tool-hover.jpg) 0 0 no-repeat;
color:#000;

}

a.show,
a.show:hover {
float:right;
color: #000;
width:72px;
margin-left:8px;

}

a.deconnexion {
float:right;
background: url(../images/tool.jpg) 0 0 no-repeat;
color: #fff;
width:72px;
margin-left:8px;
padding:6px;

}

#gl-login {
background: #000000;
color: #fff;
top: 70px;
display: none;
height: auto;
overflow: hidden;
padding: 11px 21px 11px 33px;
position: absolute;
left: 550px;
text-align:left;
z-index: 999 !important;
width:150px;
-moz-box-shadow: 1px 1px 6px #000; 
  -webkit-box-shadow: 1px 1px 6px #000; 
  box-shadow: 1px 1px 6px #000;
 
}

h3.tittle-login{
text-align:left;
font-weight:bold;
font-size:20px;
letter-spacing:1px;
margin:0 ;
padding:5px 0 12px 0px;

}

h3.tittle-register{
text-align:left;
font-weight:bold;
font-size:21px;
margin:0 ;
padding:5px 0 12px 0px;

}

#gl-register{
background: #000000;
color: #fff;
top: 70px;
display: none;
height: auto;
overflow: hidden;
padding: 16px 11px 11px 25px;
position: absolute;
left: 400px;
text-align:left;
z-index: 999;
width:450px;
-moz-box-shadow: 1px 1px 6px #000; 
  -webkit-box-shadow: 1px 1px 6px #000; 
  box-shadow: 1px 1px 6px #000;

}

#gl-search {
background: #000000;
color: #fff;
top: 70px;
display: none;
height: auto;
overflow: hidden;
padding: 5px 15px;
position: absolute;
left: 650px;
text-align:left;
z-index: 999;
-moz-box-shadow: 1px 1px 6px #000; 
-webkit-box-shadow: 1px 1px 6px #000; 
box-shadow: 1px 1px 6px #000;

}

#gl-login form a,
#gl-register form a {
background:transparent;
color:#fff ;

}

#gl-login label {
color: #fff;
padding-top:4px;

}

#gl-register label{
color: #fff;
padding-top:4px;

}

#gl-login .button  {
background:#ff7f00;
color:#fff;
padding:5px;
margin:20px 0 5px 0;
cursor:pointer;
-moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  border-radius: 8px;
 
}

#gl-register .button {
background:#ff7f00;
color:#fff;
padding:5px;
margin:10px 0 20px 0;
cursor:pointer;
-moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  border-radius: 8px;
 
}

#gl-login .inputbox,
#gl-register .inputbox {
background:#ffffff;
border: none;
color: #333333;
margin-top:2px;

}

#gl-login form {
float: left;
margin-top: 5px;

}

#gl-login form label {
float: left;

}

label.gl-login-user span,
label.gl-login-password span {
display: block;
float: left;

}

#gl-login form input.button {
font-size: 11px !important;
float: left;

}

#gl-login form #mod_login_username,
#gl-login form #mod_login_password {
background: #FFFFFF;
width: 120px;
margin: 3px 8px 0 0;
font-size: 12px !important;
padding: 2px;
font-weight:normal;

}

#gl-login form a {
padding: 5px 0 !important ;
margin: 0;
text-decoration: none;
background:transparent;
display:block;

}

#gl-login form a:hover,
#gl-login form a:active,
#gl-login form a:focus {
text-decoration: underline;

}

.gl-login-links {
padding: 2px 0 !important;
margin:0;
clear: both;
text-transform: none;
letter-spacing: normal;
font-size: 12px;
font-weight:normal;

}

.gl-login-links a {
font-weight:normal;

}

.libele {
display:none;

}
/****Sitename******/

#sitename {
float:left;
background:transparent;
width:850px;
margin-top:8px;

}

#menu{
float:left;
width:850px;
height:60px;
background: url(../images/bg-topmenu.png) no-repeat;
margin-top:0px;
text-align:center;

}

#navigation {
float:left;
height: 55px;
width:auto;
text-transform: uppercase;
text-align:center;
z-index: 50;

}

#navigation a {
float:left;
display: block;
height: 55px;
padding: 22px 7px 0 7px;
font-weight:bold;
color:#000000;
font-size:18px;

}

#navigation  a:hover{
color:#ff7f00;

}

#navigation ul {
list-style: none;
margin: 0 10px 0 10px;
padding-top: 0px ;
display: block;
padding-left: 20px;

}

#navigation li {
display: block;
float: left;
margin-right: 15px;
padding: 0 ;

}

#navigation li li a {
font-size: 13px;
padding:16px 0 0 0;
margin: 0;
color:#000;

}

#navigation li li {
border-bottom: 1px solid #521e19;
margin:0;
padding:0 ;
height:45px;

}

#navigation li.active a {
color:#ff7f00;

}

.nav, .nav * {
margin:0;
padding:0;

}

.nav{
float:left;
position: relative;

}

.nav ul {
background:#ffffff ;
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  border-radius: 8px; 
  z-index:100;

}

.nav li {
float:left;
list-style:none;
position:relative;
background:none;

}

.nav li li a {
text-decoration:none;
background: none;
float:none;
width:177px;

}

#navigation li:hover li,
#navigatin li.sfHover li,
#navigation li.active:hover li,
#navigation li.active.sfHover li,
#navigation li:hover li span,
#navigation li.sfHover li span {
background-image: none;

}

#navigation li:hover li a,
#navigation li.sfHover li a,
#navigation li.active:hover li a,
#navigation li.active.sfHover li a {
background-image: none;

}

.nav li ul {
float:none;
left:-999em;
position:absolute;
width: 177px;

}

.nav li:hover ul,
.nav li.sfHover ul {
left:0px;
top: 63px;
z-index:100;

}

.navli:hover li ul,
.nav li.sfHover li ul,
.nav li li:hover li ul,
.nav li li.sfHover li ul,
.nav li li li:hover li ul,
.nav li li li.sfHover li ul {
top:-999em;
z-index:100;

}

.nav li li:hover ul,
.nav li li.sfHover ul,
.nav li li li:hover ul,
.nav li li li.sfHover ul,
.nav li li li li:hover ul,
.nav li li li li.sfHover ul {
left: 177px;
top:0px;
width: 177px;

}

.nav li li {
position: relative;
float:none;
width: 177px;

}

/* slideshow gallery */
#slideshow {
float:left;
width:850px !important;
height:367px !important;
background: url(../images/bg-slideshow.png) 0 0 no-repeat;
margin: 15px 0 0 0;
z-index:1;

}

.slideshowlite {
width: 850px;
height: 350px;
background:transparent;
padding:2px 0px 0px 5px !important;

}

.slideshowlite a {
position:absolute;
left:0;
z-index: 5;
text-align:left;

}

.slideshowlite img {
border: none;
height: 348px;
width: 831px;

}

/* pagination control*/
.slideshowlite ul,
.slideshowlite ol {
position: absolute;
margin-top: 310px;
left:350px !important;
z-index: 3;
list-style-type:none;

}

@media screen and (-webkit-min-device-pixel-ratio:0) {
.slideshowlite ul,
.slideshowlite ol  {
  position: absolute;
margin-top: 310px;
left:350px !important;
z-index: 3;
list-style-type:none;
  }
}

.slideshowlite ul li,
.slideshowlite ol li {
float: left;
width: 34px;
padding: 0 4px 0 0;
list-style-type:none;

}

.slideshowlite ul li a {
background: transparent;
position: relative;
display: block;
width: 37px;
height: 27px;
float: left;
line-height: 26px;
text-decoration: none;
text-align: center !important;
font-size: 13px;
font-weight: bold;
color: #000 !important;

}

@media screen and (-webkit-min-device-pixel-ratio:0) {
.slideshowlite ul li a {
background:transparent;
position: relative;
display: block;
width: 37px;
height: 27px;
float: left;
line-height: 23px;
text-decoration: none;
text-align: center !important;
font-size: 13px;
font-weight: bold;
color: #000 !important;

  }
}

.slideshowlite ul li a.current {
background: url(../images/bg-number.jpg) 0 0 no-repeat;
color: #ffffff !important;

}

.slideshowlite ul li a:hover {
background: url(../images/bg-number-hover.jpg) 0 0 no-repeat;
color: #ffffff !important;

}

.slideshowlite ol {
display: none;

}

#users-box {
float:left;
width:850px;
height:260px;
background:transparent;
margin-top:15px;

}

.box-a {
float:left;
width:250px;
height:260px;
text-align:left;
background: url(../images/bg-boxa.png) 0 0 no-repeat;

}

.box-b {
float:left;
width:250px;
height:260px;
text-align:left;
background: url(../images/bg-boxb.png) 0 0 no-repeat;

}

.box-c {
float:left;
width:250px;
height:260px;
text-align:left;
background: url(../images/bg-boxc.png) 0 0 no-repeat;

}

.box-b,.box-c{
margin-left:47px;

}

#users-box  .moduletable ,
#users-box  .moduletable_menu ,
#users-box  .moduletable_text {
background:transparent;
margin:2px 0 0 7px;
padding:0;

}



#users-box  .moduletable  h3,
#users-box .moduletable_menu h3 ,
#users-box .moduletable_text h3 {
font-size:15px;
background: url(../images/bg-h3.jpg) 0 0 no-repeat;
text-transform:uppercase;
color:#000;
height:44px;
text-align:center;
width:237px;
padding-top:15px;

}

div .moduletable a,
div .moduletable_menu a ,
div .moduletable_text a {
font-weight:normal;
color:#fff;
font-size:14px;

}

div .moduletable a:hover,
div .moduletable_menu a:hover ,
div .moduletable_text a:hover {
font-weight:normal;
color:#ff7f00;

}

div .moduletable ul ,
div .moduletable_menu ul {
padding:0px 20px;
}

div .moduletable li ,
div .moduletable_menu li {
padding:3px 0px;
color:#fff;

}

/****pathway*****/

#pathway-w {
float:left;
width:850px;
height:60px;
background: url(../images/bg-topmenu.png) no-repeat;
margin-top:15px;
text-align:center;
text-transform: uppercase;
text-align: center;
font-size:24px;
margin-left:8px;
margin-right:8px;
text-decoration:none;


}

#pathway {
float:left;
width:600px;
height:34px;
margin-top: -10px;
padding:0 0 0 20px ;
text-align:left;

}

#pathway a {
color:#000;

}

#pathway a:hover {
color:#ff7f00;

}

#pathway p {
font-weight:normal;
padding: 0 ;
margin:25px 0 0 0;
font-size:18px;
color:#000;

}

/*****visitors*****/
#visitors {
float:left;
width:200px;
height:34px;
color:#000;
margin:25px 0 0 15px;

}

/*******MAIN******/
#main {
float:left;
width:600px;
text-align:left;
padding:0;
background:transparent;
margin-left:0px;
margin-top:15px;

}

#main-full {
float:left;
width:850px;
text-align:left;
padding:0;
background:transparent;
margin-left:0px;
margin-top:15px;
 
}

/****************************/
/*****Structure main******/
/****************************/
#topright {
width:190px;
height:110px;
margin-left:630px;

}

#main-top {
background: url(../images/main-top.png) 0 0 no-repeat;
width:850px;
height:10px;

}

#main-center {
background: url(../images/main-middle.jpg);
background-repeat:repeat-x;
width:850px;
height:500px;
padding:15px;

}

#main-bottom {
background: url(../images/main-bottom.png) 0 0 no-repeat;
width:850px;
height:11px;

}

#main-top-full {
background: url(../images/main-top-full.png) 0 0 no-repeat;
width:850px;
height:8px;

}

#main-center-full {
background: url(../images/main-middle.jpg);
background-repeat:repeat-x;
width:850px;
height:500px;
padding:0px;

}

#main-bottom-full{
background: url(../images/main-bottom-full.png) 0 0 no-repeat;
width:850px;
height:10px;


}

/*****calendar******/
.calendar {
display:block ;
padding:5px 0px;
background: url(../images/calendar.png) 0 0 no-repeat;
width:70px ;
height:20px;
text-align:center;

}

.day {
color: #000;
font-weight:bold;
margin: 0;
padding:0 ;
font-size:17px;
background:transparent;
font-weight: bold;
display:inline;

}

.month {
color: #000;
font-weight: bold;
margin: 0;
padding:0 ;
font-size:17px;
background:transparent;
display:inline;

}

.contentinfo {
background:transparent;
font-weight:normal;

}

/****joomla style main*****/

.contentheading,a.contentpagetitle ,.componentheading {
font-size:22px;
margin-bottom:10px;
font-weight:bold;
color:#000000;
vertical-align:top;

}

a.contentpagetitle:hover,
a.contentpagetitle:active {
color:#ff7f00;

}

.contentpaneopen, .contentpaneopen  p,.contentpane {
font-size:15px;
line-height:20px;

}

a.readon {
float:right;
font-weight: bold;
padding:5px;
margin-right:15px;
color:#000000;
margin-top:5px;
font-weight:normal;

}

.blog_more {
margin-bottom:25px;

}

.blog_more strong {
letter-spacing:1px;
font-size:14px;
text-transform:uppercase;
font-weight:bold;
padding-left:35px;
background:transparent;

}

.blog_more li {
margin:5px 25px;

}

.modifydate {
margin-top:10px;

}

.article_separator, .article_seperator{
height:20px;
width:100%;
display:block;

}

.sectiontableheader {
padding:5px;

}

td.contentdescription {
padding:5px;

}

tr.sectiontableentry1 td,
tr.sectiontableentry2 td {
padding:5px;

}

table.contenttoc {
margin: 5px;
border: 1px solid #fff;
padding: 5px;
float: right;
color:#fff;

}

table.contenttoc td {
padding: 0 5px;

}

/* Pagination ---*/
.counter {
text-align:center;
padding:10px 0;

}

ul.pagination {
float: left;
width: 100%;
padding:10px 0;
text-align:center;

}

ul.pagination li {
background: none;
display: inline;
margin: 0;
padding: 6px;
overflow: hidden;

}

ul.pagination li span {
padding: 0 5px;
line-height: 20px;

}

ul.pagination a {
background: #fff;
color: #000;
line-height: 20px;
padding: 0 5px;
text-decoration: none;

}

ul.pagination a:hover, ul.pagination a:active, ul.pagination a:focus {
background: #ff7f00;
color: #fff;
text-decoration: none;

}

/******RIGHT****/
#right {
float:left;
width:220px;
background:transparent;
margin:35px 0 0 27px;
text-align:left;
padding:0;

}

#right .moduletable,
#right .moduletable_menu ,
#right .moduletable_text {
width:200px;
color:#fff;
font-size:14px;
padding:0 15px 15px 15px;
margin-top:0;
background:transparent;

}

#right .moduletable li,
#right .moduletable_menu li,
#right .moduletable_text  li {
color:#fff;

}

#right .moduletable a,
#right .moduletable_menu  a,
#right .moduletable_text a{
color:#fff;

}

#right .moduletable a:hover,
#right .moduletable_menu  a:hover,
#right .moduletable_text a:hover {
color:#ff7f00;

}

#right .moduletable h3,
#right .moduletable_menu h3,
#right .moduletable_text h3 {
font-size:18px;
width:200px;
height:30px;
padding-top:15px;
margin-bottom:10px;
color:#000000;
text-align:center;
font-variant: small-caps;
background: url(../images/right-h3.png) 0 0 no-repeat;

}

/****POOL******/
table.poll td{
text-align:left;
font-size:15px;
margin:0 !important;
padding:0;

}

table.poll thead td {
font-size:15px;
padding-left:14px;

}

table.poll div  {
text-align:left;
padding:3px !important;

}

table.poll .button{
font-size:15px;
margin:5px 0px 0 8px;
padding:6px;

}

table.pollstableborder td.sectiontableentry1,
table.pollstableborder td.sectiontableentry2 {
background:transparent;
margin:0;
padding:3px ;

}

/****publicite*******/
div.bannergroup_text {
padding-bottom:10px;

}

div.bannerfooter {
padding:10px;

}

div.banneritem_text  {
padding-top:10px;
margin:0;

}

div.bannerheader {
padding-left:20px !important;
padding-right:20px !important;
font-size:14px;
font-weight:bold;

}

#footer{
float:left;
width:100%;
height:45px;
background:#000;
border-top: 1px solid #ffffff;
margin-top:15px;

}

.ftb {
float:left;
margin-top:15px;
text-align:center;
font-weight:normal;
font-size:12px;
width:800px;
color:#ffffff;

}

.ftb a{
padding:0 !important;
border:none !important;
color:#ffffff;
font-weight:normal;

}

.ftb a:hover{
padding:0 !important;
border:none !important;
color:#ff7f00;

}

#top {
float:left;
width:30px;
height:30px;
margin-top:8px;
padding:0 !important;
border:none !important;
background:transparent;

}

.top_button {
padding:0 !important;
border:none !important;

}
Nguồn từ forum.joomla.org và mothuthuat.com
Top
nghiadang24
Joomla! Fledgling
Joomla! Fledgling
Posts: 4
Joined: Wed Oct 26, 2011 1:33 am

Re: Vấn đề về background image trong joomla

Post by nghiadang24 » Wed Oct 26, 2011 7:23 am

Đây là kết quả mà mình đã làm được.
http://www.printer-ricoh.co.cc
Top
User avatar
phamhphuc
Joomla! Apprentice
Joomla! Apprentice
Posts: 34
Joined: Wed Dec 24, 2014 12:09 am
Contact:
Contact phamhphuc

Re: Vấn đề về background image trong joomla

Post by phamhphuc » Fri Feb 20, 2015 3:49 pm

chạy tốt, thanks aroma102 :)
Top
Locked

Return to “Thiết kế Template”