Vấn đề về background image trong joomla
Moderator: hungkhanggl
Forum rules
-
- Joomla! Fledgling
- Posts: 4
- Joined: Wed Oct 26, 2011 1:33 am
Vấn đề về background image trong joomla
Xin chỉ giúp mình cách chỉnh background sử dụng image tự động co giản trong joomla nhé.
-
- Joomla! Enthusiast
- Posts: 241
- Joined: Mon Dec 14, 2009 1:52 pm
- Contact:
Re: Vấn đề về background image trong joomla
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.
Good luck.
-
- Joomla! Fledgling
- Posts: 4
- Joined: Wed Oct 26, 2011 1:33 am
Re: Vấn đề về background image trong joomla
anh có thể viết một đoạn code demo cho em tham khảo được không?
-
- Joomla! Fledgling
- Posts: 4
- Joined: Wed Oct 26, 2011 1:33 am
Re: Vấn đề về background image trong joomla
Đã 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:
Nguồn từ forum.joomla.org và mothuthuat.com
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;
}
-
- Joomla! Fledgling
- Posts: 4
- Joined: Wed Oct 26, 2011 1:33 am
Re: Vấn đề về background image trong joomla
Đây là kết quả mà mình đã làm được.
http://www.printer-ricoh.co.cc
http://www.printer-ricoh.co.cc
- phamhphuc
- Joomla! Apprentice
- Posts: 34
- Joined: Wed Dec 24, 2014 12:09 am
- Contact:
Re: Vấn đề về background image trong joomla
chạy tốt, thanks aroma102
Best Joomla Hosting: http://joomla2x.com/choose-best-joomla-hosting/
Joomla tutorial: http://joomla2x.com
Joomla tutorial: http://joomla2x.com