css problem

Everything to do with Joomla! 1.5 templates and templating.

Moderator: General Support Moderators

Forum rules
Forum Rules
Absolute Beginner's Guide to Joomla! <-- please read before posting, this means YOU.
nap0213
Joomla! Intern
Joomla! Intern
Posts: 51
Joined: Thu Sep 24, 2009 12:44 am

css problem

Post by nap0213 » Thu Sep 24, 2009 12:51 am

Hey everyone, I am trying to keep the rounded edges in my joomla template while keeping my log where it is, can you anyone please help me? Below is my site to show what I am describing:

http://150.216.55.177/napcom/

Here is a copy of my blue_cg.css

/* blue */
#page_bg {
background: #0C3A6D;
}

div#wrapper {
background: #f7f7f7 url(../images/blue/mw_shadow_l.png) 0 0 repeat-y;
}

div#wrapper_r { background: #ffffff
background: url(../images/blue/mw_shadow_r.png) 100% 0 repeat-y;
}

div#header {
background: url(../images/blue/mw_header_t.png) 0 0 repeat-x;
}

div#header_l {
background: url(../images/blue/mw_header_t_l.png) 0 0 no-repeat;
}

div#header_r {
background: url(../images/blue/mw_header_t_r.png) 100% 0 no-repeat;
}

div#footer {
background: #f7f7f7 url(../images/blue/mw_footer_b.png) 0 100% repeat-x;
}

div#footer_l {
background: url(../images/blue/mw_footer_b_l.png) 0 0 no-repeat;
}

div#footer_r {
background: url(../images/blue/mw_footer_b_r.png) 100% 0 no-repeat;
}


And now my TEMPLATE.CSS

/*****************************/
/*** Core html setup stuff ***/
/*****************************/

html {
height: 100%;
margin-bottom: 1px;
}

form {
margin: 0;
padding: 0;
}

body {
font-family: Helvetica,Arial,sans-serif;
line-height: 1.3em;
margin: 0px 0px 0px 0px;
font-size: 12px;
color: #333;
}

a:link, a:visited {
text-decoration: none;
font-weight: normal;
}

a:hover {
text-decoration: underline;
font-weight: normal;
}

input.button { cursor: pointer; }

p { margin-top: 0; margin-bottom: 5px; }

img { border: 0 none; }

/*****************************************/
/*** Template specific layout elements ***/
/*****************************************/
#page_bg {

padding: 10px 0;
margin-bottom: 1px;

}

div.center {
text-align: center;
}

div#wrapper {
margin-left: auto;
margin-right: auto;
}

body.width_medium div#wrapper {
width: 950px;
}

body.width_small div#wrapper {
width: 773px;
}

body.width_fmax div#wrapper {
min-width: 750px;
max-width: 1050px;
}

div#header_l {
position: relative;
}

div#header_r {
height: 90px;
padding-left: 370px;
padding-right: 30px;
padding-top: 25px;
overflow: hidden;
text-align: left;
}

div#logo {
position: absolute;
left: 0;
top: 0;
float: left;
width: 600px;
height: 105px;
background: url(../images/NAPCOM_Logo_Sept_a_2009.jpg) 0 0 no-repeat;
margin-left: 220px;
margin-top: 25px;
}

div#newsflash {
width: auto;
margin-left: 350px;
margin-right: 30px;
border: 1px solid #00f;
}

div#tabarea {
background: #f7f7f7 url(../images/mw_header_b.png) 0 0 repeat-x;
margin: 0 11px;

}

div#tabarea_l {
background: url(../images/mw_header_l_b.png) 0 0 no-repeat;
padding-left: 32px;
}

div#tabarea_r {
height: 42px;
background: url(../images/mw_header_r_b.png) 100% 0 no-repeat;
padding-right: 1px;
}

div#footer_r {
padding-top: 10px;
height: 47px;
overflow: hidden;
}

div#footer_r div {
text-align: center;
font-size: .90em;
color: #aaa;
}

div#footer_r a:link, div#footer_r a:visited {
color: #999;
}

div#footerspacer {
height: 10px;
}

#pathway {
padding: 0px 10px 8px;
width: auto;
margin-top: -2px;
margin-right: 250px;
text-align: left;
}

#search {
float: right;
width:320px;
margin-top: -20px;
margin-right: 30px;
height: 40px;
overflow: hidden;
text-align:right;
}

form#searchForm input {
vertical-align: middle;
}

form#searchForm table {
border-collapse: collapse;
}

form#searchForm td {
padding:0;
}

#mod_search_searchword {
padding-left: 3px;
}

#area {
padding: 0;
}

#whitebox {
margin: 0 21px 0px 21px;
background: #fff;
width: auto;
}

#whitebox div {
text-align: left;
}

#whitebox_t {
background: #fff url(../images/mw_content_t.png) 0 0 repeat-x;
}

#whitebox_tl {
background: url(../images/mw_content_t_l.png) 0 0 no-repeat;
}

#whitebox_tr {
height: 10px;
overflow: hidden;
background: url(../images/mw_content_t_r.png) 100% 0 no-repeat;
}

#whitebox_m {
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
width: auto;
padding: 1px 8px;
}

#whitebox_b {
margin-top: -5px;
background: url(../images/mw_content_b.png) 0 100% repeat-x;
}

#whitebox_bl {
background: url(../images/mw_content_b_l.png) 0 100% no-repeat;
}

#whitebox_br {
height: 13px;
background: url(../images/mw_content_b_r.png) 100% 100% no-repeat;
}

/* horizontal pill menu */
table.pill {
margin-left: auto;
margin-right: auto;
padding: 0;
}

td.pill_l {
background: url(../images/mw_menu_cap_l.png) no-repeat;
width: 20px;
height: 32px;

}

td.pill_m {
background: url(../images/mw_menu_normal_bg.png) repeat-x;
padding: 0;
margin: 0;
width: auto;
}

td.pill_r {
background: url(../images/mw_menu_cap_r.png) no-repeat;
width: 19px;
height: 32px;
}

#pillmenu {
white-space: nowrap;
height: 32px;
float: left;
}

#pillmenu ul {
margin: 0;
padding: 0;
list-style:none;
}

#pillmenu li {
float: left;
background: url(../images/mw_menu_separator.png) top right no-repeat;
margin: 0;
padding: 0;
}

#pillmenu a {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
float:left;
display:block;
height: 24px;
line-height: 24px;
padding: 0 20px;
color: #000;
text-decoration: none;
}

#pillmenu a#active_menu-nav {
margin-top:2px;
height: 21px;
line-height: 21px;
background-position: 0 0;
}

#leftcolumn {
padding: 0;
margin: 0;
width: 20%;
float:left;
}

#maincolumn,
#maincolumn_full {
margin-left: 20%;
padding-left: 15px;
width: 75%;
}

#maincolumn_full {
margin-left: 0;
padding: 0;
width: 100%;
}

table.nopad {
width: 100%;
border-collapse: collapse;
padding: 0;
margin: 0;
margin-bottom: 15px;
}

table.nopad td.middle_pad {
width: 20px;
}

/*****************************************/
/*** Joomla! specific content elements ***/
/*****************************************/

div.offline {
background: #fffebb;
width: 100%;
position: absolute;
top: 0;
left: 0;
font-size: 1.2em;
padding: 5px;
}

span.pathway {
display: block;
margin: 0 20px;
height: 16px;
line-height: 16px;
overflow: hidden;
}

/* headers */
div.componentheading {
padding-left: 0px;
}

h1 {
padding: 0;
font-family:Helvetica ,Arial,sans-serif;
font-size: 1.3em;
font-weight: bold;
vertical-align: bottom;
color: #666;
text-align: left;
width: 100%;
}

h2, .contentheading {
padding: 0;
font-family: Arial, Helvetica,sans-serif;
font-size: 1.4em;
font-weight: normal;
vertical-align: bottom;
color: #333;
text-align: left;
width: 100%;
}

table.contentpaneopen h3 {
margin-top: 25px;
}

h4 {
font-family: Arial, Helvetica, sans-serif;
color: #333;
}

h3, .componentheading, table.moduletable th, legend {
margin: 0;
font-weight: bold;
font-family: Helvetica,Arial,sans-serif;
font-size: 1.5em;
padding-left: 0px;
margin-bottom: 10px;
text-align: left;
}

/* small text */
.small {
font-size: .90em;
color: #999;
font-weight: normal;
text-align: left;
}

.modifydate {
height: 20px;
vertical-align: bottom;
font-size: .90em;
color: #999;
font-weight: normal;
text-align: left;
}

.createdate {
height: 20px;
vertical-align: top;
font-size: .90em;
color: #999;
font-weight: normal;
vertical-align: top;
padding-bottom: 5px;
padding-top: 0px;

}

a.readon {
margin-top: 10px;
display: block;
float: left;
background: url(../images/mw_readon.png) top right no-repeat;
padding-right: 20px;
line-height: 14px;
height: 16px;
}

/* form validation */
.invalid { border-color: #ff0000; }
label.invalid { color: #ff0000; }


/** overlib **/

.ol-foreground {
background-color: #f6f6f6;
}

.ol-background {
background-color: #666;
}

.ol-textfont {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
}

.ol-captionfont {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #f6f6f6;
font-weight: bold;
}
.ol-captionfont a {
color: #0B55C4;
text-decoration: none;
font-size: 12px;
}

.ol-closefont {}

/* menu links */
a.mainlevel:link, a.mainlevel:visited {
padding-left: 5px;
}

a.mainlevel:hover {

}

/* spacers */
span.article_separator {
display: block;
height: 20px;
}

.article_column {
padding-right: 5px;
}

.column_separator {
border-left: 1px dashed #e0e0e0;
padding-left: 10px;
}

td.buttonheading {

}

td.buttonheading img {
border:none;
}

.clr {
clear: both;
}

td.greyline {
width: 20px;
background: url(../images/mw_line_grey.png) 50% 0 repeat-y;
}

div#maindivider {
border-top: 1px solid #ddd;
margin-bottom: 10px;
overflow: hidden;
height: 1px;
}

table.blog span.article_separator {
display: block;
height: 20px;
}

/* edit button */
.contentpaneopen_edit{
float: left;
}

/* table of contents */
table.contenttoc {
margin: 5px;
border: 1px solid #ccc;
padding: 5px;
float: right;
}

table.contenttoc td {
padding: 0 5px;
}


/* content tables */
td.sectiontableheader {
background: #efefef;
color: #333;
font-weight: bold;
padding: 4px;
border-right: 1px solid #fff;
}

tr.sectiontableentry0 td,
tr.sectiontableentry1 td,
tr.sectiontableentry2 td {
padding: 4px;
}

td.sectiontableentry0,
td.sectiontableentry1,
td.sectiontableentry2 {
padding: 3px;
}


/* content styles */
table.contentpaneopen, table.contentpane {
margin: 0;
padding: 0;
width: 100%;
}

table.contentpaneopen li {
margin-bottom: 5px;
}

table.contentpaneopen fieldset {
border: 0;
border-top: 1px solid #ddd;
}

table.contentpaneopen h3 {
margin-top: 25px;
}

table.contentpaneopen h4 {
font-family: Arial, Helvetica, sans-serif;
color: #333;
}

.highlight {
background-color: #fffebb;
}

/* module control elements */
table.user1user2 div.moduletable {
margin-bottom: 0px;
}

div.moduletable, div.module {
margin-bottom: 25px;
}

div.module_menu h3 {
font-family: Helvetica, Arial, sans-serif;
font-size: 12px;
font-weight: bold;
color: #eee;
margin: -23px -4px 5px -5px;
padding-left: 10px;
padding-bottom: 2px;
}

div.module_menu {
margin: 0;
padding: 0;
margin-bottom: 15px;
}

div.module_menu div div div {
padding: 10px;
padding-top: 30px;
padding-bottom: 15px;
width: auto;
}

div.module_menu div div div div {
background: none;
padding: 0;
}

div.module_menu ul {
margin: 10px 0;
padding-left: 20px;
}

div.module_menu ul li a:link, div.module_menu ul li a:visited {
font-weight: bold;
}

#leftcolumn div.module {
padding: 0 10px;
}

#leftcolumn div.module table {
width: auto;
}

/* forms */
table.adminform textarea {
width: 540px;
height: 400px;
font-size: 1em;
color: #000099;
}

div.search input {
width: 145px;
border: 1px solid #ccc;
margin: 15px 0 10px 0;
}

form#form-login fieldset { border: 0 none; margin: 0em; padding: 0.2em;}
form#form-login ul { padding-left: 20px; }

form#com-form-login fieldset { border: 0 none; margin: 0em; padding: 0.2em;}
form#com-form-login ul { padding-left: 20px; }

/* thumbnails */
div.mosimage { margin: 5px; }
div.mosimage_caption { font-size: .90em; color: #666; }

div.caption { padding: 0 10px 0 10px; }
div.caption img { border: 1px solid #CCC; }
div.caption p { font-size: .90em; color: #666; text-align: center; }

/* Parameter Table */
table.paramlist {
margin-top: 5px;
}

table.paramlist td.paramlist_key {
width: 128px;
text-align: left;
height: 30px;
}

table.paramlist td.paramlist_value {
}

div.message {
font-family : "Trebuchet MS", Arial, Helvetica, sans-serif;
font-weight: bold;
font-size : 14px;
color : #c30;
text-align: center;
width: auto;
background-color: #f9f9f9;
border: solid 1px #d5d5d5;
margin: 3px 0px 10px;
padding: 3px 20px;
}

/* Banners module */

/* Default skyscraper style */
.bannergroup {
}

.banneritem img {
display: block;
margin-left: auto;
margin-right: auto;
}

/* Text advert style */

.banneritem_text {
padding: 4px;
font-size: 11px;
}

.bannerfooter_text {
padding: 4px;
font-size: 11px;
background-color: #F7F7F7;
text-align: right;
}

/* System Messages */
/* see system general.css */

.pagination span { padding: 2px; }
.pagination a { padding: 2px; }

/* Polls */
.pollstableborder td {
text-align: left;
}

/* WebLinks */
span.description {
display:block;
padding-left: 30px;
}

/* Frontend Editing*/
fieldset {
border: 1px solid #ccc;
margin-top: 15px;
padding: 15px;
}

legend {
margin: 0;
padding: 0 10px;
}

td.key {
border-bottom:1px solid #eee;
color: #666;
}

/* Tooltips */

.tool-tip {
float: left;
background: #ffc;
border: 1px solid #D4D5AA;
padding: 5px;
max-width: 200px;
}

.tool-title {
padding: 0;
margin: 0;
font-size: 100%;
font-weight: bold;
margin-top: -15px;
padding-top: 15px;
padding-bottom: 5px;
background: url(../../system/images/selector-arrow.png) no-repeat;
}

.tool-text {
font-size: 100%;
margin: 0;
}

/* System Standard Messages */
#system-message { margin-bottom: 20px; }

#system-message dd.message ul { background: #C3D2E5 url(../../system/images/notice-info.png) 4px center no-repeat;border-top: 3px solid #DE7A7B; border-bottom: 3px solid #DE7A7B; margin:0px; padding-left: 40px; text-indent:0px;}

/* System Error Messages */
#system-message dd.error ul { color: #c00; background: #E6C0C0 url(../../system/images/notice-alert.png) 4px center no-repeat; border-top: 3px solid #DE7A7B; border-bottom: 3px solid #DE7A7B; margin:0px; padding-left: 40px; text-indent:0px;}

/* System Notice Messages */
#system-message dd.notice ul { color: #c00; background: #EFE7B8 url(../../system/images/notice-note.png) 4px center no-repeat; border-top: 3px solid #F0DC7E; border-bottom: 3px solid #F0DC7E; margin:0px; padding-left: 40px; text-indent:0px;}

#syndicate{
float:left;
padding-left: 25px;
}

#power_by{
float:right;
padding-right: 25px;
}

/* Component Specific Fixes */

#component-contact table td {
padding: 2px 0;
}


Lastly, can anyone tell me how to put an image in the background aka on either side of the main window?

Thanks a ton everyone. :p
Last edited by Geoff on Sat Sep 26, 2009 12:38 am, edited 1 time in total.
Reason: modified topic title

User avatar
betweenbrain
Joomla! Guru
Joomla! Guru
Posts: 801
Joined: Wed Feb 28, 2007 5:40 am
Location: Connecticut, USA
Contact:

Re: PLEASE HELP

Post by betweenbrain » Thu Sep 24, 2009 1:27 am

Hi nap0213,

Is there any chance that you can post a screen shot of what you want it to look like? Just draw arrows and notes, on what it is like now, indicating what you want it to be like.

Best,

Matt
Best,

Matt Thomas

User avatar
wlrdq
Joomla! Hero
Joomla! Hero
Posts: 2672
Joined: Thu Jul 24, 2008 12:48 pm
Location: Austin, TX
Contact:

Re: PLEASE HELP

Post by wlrdq » Thu Sep 24, 2009 1:28 am

I think one issue is that you need to edit the left edge background image to make it taller since your logo seems taller:
http://150.216.55.177/napcom/templates/ ... lue_bg.css

Code: Select all

div#header_l {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:transparent url(../images/blue/mw_header_t_l.png) no-repeat scroll 0 0;
}
http://150.216.55.177/napcom/templates/ ... er_t_l.png

And then it looks like your id="wrapper_r" div is missing it's background image for the shadow on the right (I looked at my rhuk_milkyway to figure out what was missing):
http://150.216.55.177/napcom/templates/ ... adow_r.png


For the background image, can you do something like this:
http://150.216.55.177/napcom/templates/ ... lue_bg.css

Code: Select all

#page_bg {
	background: #0C3A6D url(../images/arrow.png) 0 0;
}
You would obviously need to change the image, it's position, and if you want it to repeat.


Let me know if you need more help.
Will Mavis - Joomla Developer
http://www.covertapps.com/jam <<< Joomla! on your Android, iPhone, iPad, and iPod Touch
If you think I can help you, PM me a link to your post and I will respond. Please don't hijack another user's thread.

nap0213
Joomla! Intern
Joomla! Intern
Posts: 51
Joined: Thu Sep 24, 2009 12:44 am

Re: PLEASE HELP

Post by nap0213 » Thu Sep 24, 2009 9:48 pm

Can you please tell me what the correct css and even html code is for this problem. I am not that skilled in css and really do not know what does what. Please help. Thanks to all who have provided help thus far.

http://150.216.55.177/napcom/ (click page for description)

nap0213
Joomla! Intern
Joomla! Intern
Posts: 51
Joined: Thu Sep 24, 2009 12:44 am

Re: PLEASE HELP

Post by nap0213 » Thu Sep 24, 2009 11:25 pm

wlrdq:

I added the first block of code and it didnt seem like anything changed. I just want everything to be flush in the main window as far as the template is concerned. No sticking out grey bar or uneven edges. Here is the current modified code:

/* blue */
#page_bg {
background: #0C3A6D;
}

div#wrapper {
background: #f7f7f7 url(../images/blue/mw_shadow_l.png) 0 0 repeat-y;
}

div#wrapper_r { background: #ffffff
background: url(../images/blue/mw_shadow_r.png) 100% 0 repeat-y;
}

div#header {
background: url(../images/blue/mw_header_t.png) 0 0 repeat-x;
}

div#header_l {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
-background:transparent url(../images/blue/mw_header_t_l.png) no-repeat scroll 0 0;
}

div#header_r {
background: url(../images/blue/mw_header_t_r.png) 100% 0 no-repeat;
}

div#footer {
background: #f7f7f7 url(../images/blue/mw_footer_b.png) 0 100% repeat-x;
}

div#footer_l {
background: url(../images/blue/mw_footer_b_l.png) 0 0 no-repeat;
}

div#footer_r {
background: url(../images/blue/mw_footer_b_r.png) 100% 0 no-repeat;
}

Please letm ek now

nap0213
Joomla! Intern
Joomla! Intern
Posts: 51
Joined: Thu Sep 24, 2009 12:44 am

Re: PLEASE HELP

Post by nap0213 » Thu Sep 24, 2009 11:45 pm

PS - THANKS SO MUCH!!!

Two Last Things

How do I get menus that I create to show up on the front page and to be linked to articles that I created.

I am getting a DB error code 1 when trying to clicking on the category manager or module manager.

User avatar
betweenbrain
Joomla! Guru
Joomla! Guru
Posts: 801
Joined: Wed Feb 28, 2007 5:40 am
Location: Connecticut, USA
Contact:

Re: PLEASE HELP

Post by betweenbrain » Fri Sep 25, 2009 4:25 pm

Best,

Matt Thomas

User avatar
wlrdq
Joomla! Hero
Joomla! Hero
Posts: 2672
Joined: Thu Jul 24, 2008 12:48 pm
Location: Austin, TX
Contact:

Re: PLEASE HELP

Post by wlrdq » Fri Sep 25, 2009 8:36 pm

nap0213,

It looks like you got some of it working. If the link that betweenbrain posted doesn't get things fixed, let me know and I will try to help.
Will Mavis - Joomla Developer
http://www.covertapps.com/jam <<< Joomla! on your Android, iPhone, iPad, and iPod Touch
If you think I can help you, PM me a link to your post and I will respond. Please don't hijack another user's thread.

nap0213
Joomla! Intern
Joomla! Intern
Posts: 51
Joined: Thu Sep 24, 2009 12:44 am

Re: PLEASE HELP

Post by nap0213 » Fri Sep 25, 2009 11:37 pm

wlrdq:

Ok, I still do not know how to get the rest of it working. As far as full rounded main window. A I am little confused on this process, on how to get categories/sections with the articles in them to show up, for example if i create a menu called shoes, and then a category called shoes > section called make > article with the styles, how to I get these items to show up under the menu called shoes. Lastly, how do I get menus that I create to show up on the front page and associate them with articles in categories/sections that I have created.

Thanks so much wlrdq and betweenbrain for helping!!

User avatar
betweenbrain
Joomla! Guru
Joomla! Guru
Posts: 801
Joined: Wed Feb 28, 2007 5:40 am
Location: Connecticut, USA
Contact:

Re: PLEASE HELP

Post by betweenbrain » Sat Sep 26, 2009 12:32 am

nap0213 wrote:how to I get these items to show up under the menu called shoes.
That depends on what exactly you want to show up (i.e. just the article "shoes", a blog of all of the articles in the category "shoes", a blog of all of the articles in the section "make" ... etc).

In this case, the menu simply points to content that you want to display. I'd suggest creating the section and categories first, then the content. And finally choose the best menu type to represent your content. See this document on organizing content.

Don't be afraid to experiment with the different menu types.

You can check out this comprehensive document of menu types:
http://help.joomla.org/ghop/feb2008/tas ... 0Types.zip

Have you looked at the beginners guide?

There is a bit of a learning curve, but its well worth it!

Best,

Matt
Best,

Matt Thomas

nap0213
Joomla! Intern
Joomla! Intern
Posts: 51
Joined: Thu Sep 24, 2009 12:44 am

Re: css problem

Post by nap0213 » Sat Sep 26, 2009 2:35 am

Thanks Matt, that really doesnt answer my coding question about the layout. I am hoping "wlrdq" can help. Also it doesnt address the issue on how to create a menu to appear on the front page, I tried that, and I have no menu etc.

Anyways layout is the first concern getting that page looking right, then the second is the menu issue. Again here is the css code:

/* blue */
#page_bg {
background: #0C3A6D;
}

div#wrapper {
background: #f7f7f7 url(../images/blue/mw_shadow_l.png) 0 0 repeat-y;
}

div#wrapper_r { background: #ffffff
background: url(../images/blue/mw_shadow_r.png) 100% 0 repeat-y;
}

div#header {
background: url(../images/blue/mw_header_t.png) 0 0 repeat-x;
}

div#header_l {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
-background:transparent url(../images/blue/mw_header_t_l.png) no-repeat scroll 0 0;
}

div#header_r {
background: url(../images/blue/mw_header_t_r.png) 100% 0 no-repeat;
}

div#footer {
background: #f7f7f7 url(../images/blue/mw_footer_b.png) 0 100% repeat-x;
}

div#footer_l {
background: url(../images/blue/mw_footer_b_l.png) 0 0 no-repeat;
}

div#footer_r {
background: url(../images/blue/mw_footer_b_r.png) 100% 0 no-repeat;
}

http://150.216.55.177/napcom/

User avatar
wlrdq
Joomla! Hero
Joomla! Hero
Posts: 2672
Joined: Thu Jul 24, 2008 12:48 pm
Location: Austin, TX
Contact:

Re: css problem

Post by wlrdq » Sat Sep 26, 2009 6:17 pm

First, add the top left background image like so:

Code: Select all

div#header_l {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:transparent url(../images/blue/mw_header_t_l.png) no-repeat scroll 0 0;
}
Then I would get rid of the div with the height of 140px below:

Code: Select all

<div id="header">
	<div style="height: 140px;">
		<div id="header_l">
Then I would chop some of the black off the top/bottom of your logo so it isn't as tall and will fit without stretching the header.

Once you have that, let me know and I can help with the rest.

You will need to modify all the images with the blue shadow color to match your background if you want. Do you have a drawing/paint program?
Will Mavis - Joomla Developer
http://www.covertapps.com/jam <<< Joomla! on your Android, iPhone, iPad, and iPod Touch
If you think I can help you, PM me a link to your post and I will respond. Please don't hijack another user's thread.

nap0213
Joomla! Intern
Joomla! Intern
Posts: 51
Joined: Thu Sep 24, 2009 12:44 am

Re: css problem

Post by nap0213 » Sat Sep 26, 2009 8:56 pm

Ok I will try that for sure. I dont see the 140px in my code? nor the

div id="header">
<div style="height: 140px;">
<div id="header_l">


Here is what I have so far:

/* blue */
#page_bg {
background: #0C3A6D url(../images/blue/DJ_Wallpaper_Without_Centrik.jpg)0 0;
background-attachment: fixed;
}

div#wrapper {
background: #f7f7f7 url(../images/blue/mw_shadow_l.png) 0 0 repeat-y;
}

div#wrapper_r {
background: url(../images/blue/mw_shadow_r.png) 100% 0 repeat-y;
}

div#header {
background: url(../images/blue/mw_header_t.png) 0 0 repeat-x;
}

div#header_l {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:transparent url(../images/blue/mw_header_t_l.png) no-repeat scroll 0 0;
}

div#header_r {
background: url(../images/blue/mw_header_t_r.png) 100% 0 no-repeat;
}

div#footer {
background: #f7f7f7 url(../images/blue/mw_footer_b.png) 0 100% repeat-x;
}

div#footer_l {
background: url(../images/blue/mw_footer_b_l.png) 0 0 no-repeat;
}

div#footer_r {
background: url(../images/blue/mw_footer_b_r.png) 100% 0 no-repeat;
}

nap0213
Joomla! Intern
Joomla! Intern
Posts: 51
Joined: Thu Sep 24, 2009 12:44 am

Re: css problem

Post by nap0213 » Sat Sep 26, 2009 8:57 pm

"Then I would chop some of the black off the top/bottom of your logo so it isn't as tall and will fit without stretching the header."

How do you do the above? Also once we have this fixed...can we begin on the menu discussion?

User avatar
wlrdq
Joomla! Hero
Joomla! Hero
Posts: 2672
Joined: Thu Jul 24, 2008 12:48 pm
Location: Austin, TX
Contact:

Re: css problem

Post by wlrdq » Sun Sep 27, 2009 8:54 pm

Look in your template's index.php for the <div style="height: 140px;">. If you remove it, make sure to remove the associated closing </div> tag:
http://150.216.55.177/napcom/templates/ ... /index.php


To edit your image, you can use a program like Paint that comes with Windows:
http://windowshelp.microsoft.com/Window ... b1033.mspx

There are also a lot of free image manipulation programs out there like Gimp:
http://www.gimp.org/

Or IrfanView:
http://www.irfanview.com/

There are tutorials and videos out there on how to use these programs to manipulate images. You just need to crop your image so it isn't so tall. Let me know if you can't figure out what to do.


Can you describe exactly how you want your menus to work? What items do you want on your top menu? How many submenus do you want? Where do you want them to show up (under the top menu, on the left side, etc)? Do you want them to be the same on every page or change depending on what the user clicks on the top menu? The more detail you give, the easier we can probably help, but don't go overboard :D
Will Mavis - Joomla Developer
http://www.covertapps.com/jam <<< Joomla! on your Android, iPhone, iPad, and iPod Touch
If you think I can help you, PM me a link to your post and I will respond. Please don't hijack another user's thread.

nap0213
Joomla! Intern
Joomla! Intern
Posts: 51
Joined: Thu Sep 24, 2009 12:44 am

Re: css problem

Post by nap0213 » Mon Sep 28, 2009 1:01 am

The way I would like the items to work would be for the left navigation pane:

1. The Gear Shop (I would like it to access Virtuemart and the user to be able to login and then add items to their cart etc.)

2. About the Company: Be able to click on it and it give a description of the company along with some embedded images within the article (text wrapping around it)

3. Music (have streaming music, like a flash player where the user can select different songs to hear play)

4. The DJ XChange ( A Forum Where Users can write something and make topics)

5. Frequently asked questions (article supply asked questions)

6. Tips And Tricks For DJ's (categories contain sections on hardware/techniques i.e. Hardware > Turntables > Technics .......Techniques > beatmatching > Quick Tutorial (embed [youtube] video)


TOP NAVIGATION PANE:

1. Home

2. The Gear Shop (instant access to the storefront)

3. Contact Us

4. Top 10 Pick


These would be the same for every page. I think thats it. Thanks Will !

User avatar
wlrdq
Joomla! Hero
Joomla! Hero
Posts: 2672
Joined: Thu Jul 24, 2008 12:48 pm
Location: Austin, TX
Contact:

Re: css problem

Post by wlrdq » Tue Oct 06, 2009 9:41 pm

Sorry, I had to send my laptop back for repairs, so I was computer-less for a few days. It was an interesting experience. I suggest everyone try it for a few days.

It sounds like you should create two menus and two instances of the mod_mainmenu module (one for each menu).

Left Menu
  • The Gear Shop - Component -> Virtuemart
  • About The Company - I would just make an article and point to it
  • Music - There are a lot of components out there that will do this, I think. I would just play with a few. If you find one you like, let us know.
  • The DJ XChange - Plenty of forum components out there as well. I think the most popular is probably Kunena: http://extensions.joomla.org/extensions ... forum/7256
  • Tips And Tricks For DJ's - Section or Category View
Top Menu If this doesn't make sense or you have more questions, just let me know.
Will Mavis - Joomla Developer
http://www.covertapps.com/jam <<< Joomla! on your Android, iPhone, iPad, and iPod Touch
If you think I can help you, PM me a link to your post and I will respond. Please don't hijack another user's thread.

nap0213
Joomla! Intern
Joomla! Intern
Posts: 51
Joined: Thu Sep 24, 2009 12:44 am

Re: css problem

Post by nap0213 » Tue Oct 06, 2009 10:35 pm

Thanks Will a ton,

So more questions when you say "point to it" how do we do that exactly? And how do we get the forum component to show up as a menu item on the home page, and have it link to the forum component?

Also The Contact Us form I guess is the same question as above with having it published on the front page as a menu item link and then user clicking and being directed to the forum?

Lastly, how do we get Articles to show up as a link say: User clicks a menu item> Top Ten Pick > opens page within main window that then displays the top ten pick as you would do within any menu item clicked on.

User avatar
wlrdq
Joomla! Hero
Joomla! Hero
Posts: 2672
Joined: Thu Jul 24, 2008 12:48 pm
Location: Austin, TX
Contact:

Re: css problem

Post by wlrdq » Wed Oct 07, 2009 12:32 am

If you go to Menus -> Menu Manager, it will list all the menus you have created and you can make new ones. For an example, let's create a new menu called "New Menu".

Once you have a menu created, you can go to Menus -> New Menu and it will list all the menu items for that menu. In our case, it will start out empty. If you use the New button up above, Joomla will present you with a list of all the different menu item types available. If you look under Internal Link -> Article, these are the link types for displaying sections, categories, or an individual article. Once you select a menu type (Article Layout, for example), you will be able to type in a Title for your menu item (what the user sees) and then provide Parameters on the right (the article you want to display in this case).

If you create a new menu item, you will also see different views for the different components you have installed like Kunena Forum, RSForms!, etc. They have their own Parameters that are specific to them. Some components don't require setting parameters, though.

Once you have your two menus created, you can create new instances of mod_mainmenu in Extensions -> Module Manager and set the Menu Name parameter for the module to the menus you created. Then just put them in the correct template positions (I'm guessing top and left), and you should be good to go.

Hope this helps clear things up. If you still can't get it, let me know. Once you get the hang of it, it will all make more sense.
Will Mavis - Joomla Developer
http://www.covertapps.com/jam <<< Joomla! on your Android, iPhone, iPad, and iPod Touch
If you think I can help you, PM me a link to your post and I will respond. Please don't hijack another user's thread.

nap0213
Joomla! Intern
Joomla! Intern
Posts: 51
Joined: Thu Sep 24, 2009 12:44 am

Re: css problem

Post by nap0213 » Wed Oct 07, 2009 11:32 pm

What is the point of the mod_main menu / and the extensions. I guess my question is why do you have to create a new menu, and then a module. How do we tie the menu we created to the new module, I guess I am confused on that process and why it must be done etc. Thanks again!!

nap0213
Joomla! Intern
Joomla! Intern
Posts: 51
Joined: Thu Sep 24, 2009 12:44 am

Re: css problem

Post by nap0213 » Thu Oct 08, 2009 12:23 am

Also I have a flash music player module, how do I make a menu link that once the user clicks it, the flash player is shown on the next page, for example > The DJ's Headhphones > new page displays player. Basically put a link for the module

User avatar
wlrdq
Joomla! Hero
Joomla! Hero
Posts: 2672
Joined: Thu Jul 24, 2008 12:48 pm
Location: Austin, TX
Contact:

Re: css problem

Post by wlrdq » Thu Oct 08, 2009 1:10 am

This article describes the differences between modules and components:
http://www.cmsmarket.com/resources/cont ... extensions
Hopefully that explains the difference between the two and helps you understand the purpose of each. If you have any questions, let me know.

If you only want the module to show up on one page, I would create a article (it can either be empty if you don't want any content on the page). Then create a menu item to that article. Finally, edit the module instance of your flash music player and change the Menu Assignment so the module only shows up on that page.

I think once you understand the purpose of the different extensions, it will be more clear how to do things. If you have specific questions, let me know.
Will Mavis - Joomla Developer
http://www.covertapps.com/jam <<< Joomla! on your Android, iPhone, iPad, and iPod Touch
If you think I can help you, PM me a link to your post and I will respond. Please don't hijack another user's thread.

User avatar
shibu
Joomla! Guru
Joomla! Guru
Posts: 681
Joined: Fri Oct 24, 2008 5:35 am
Location: Openkey Technologies, India
Contact:

Re: css problem

Post by shibu » Thu Oct 08, 2009 9:20 am

Hi,

You this simple code to make the round corner in joomla module
div.module_menu {
background: url(../images/black/mw_box_br.png) 100% 100% no-repeat;
}

div.module_menu div {
background: url(../images/black/mw_box_bl.png) 0 100% no-repeat;
}

div.module_menu div div {
background: url(../images/black/mw_box_tr.png) 100% 0 no-repeat;
}

div.module_menu div div div {
background: url(../images/black/mw_box_tl.png) 0 0 no-repeat;
}


If you need further reference..
Please refer the joomla default template rhuk_milkyway..
css file path : css/black.css
imagepath : images/black/

Thanks and regards
Shibu
http://www.openkeytech.com/ - Joomla Extension Development

nap0213
Joomla! Intern
Joomla! Intern
Posts: 51
Joined: Thu Sep 24, 2009 12:44 am

Re: css problem

Post by nap0213 » Fri Oct 09, 2009 1:32 am

How do you make just an article, then make that a menu item link. Do I need to make a new menu module? Then create the new menu item? When I try to create a single article it wants me to set select an article in the parameters section such as the "about the company" and then it puts my new article link as a subset under the home link.

http://150.216.55.177/napcom/

I recently disabled it, so its not showing right now on the sight.

User avatar
wlrdq
Joomla! Hero
Joomla! Hero
Posts: 2672
Joined: Thu Jul 24, 2008 12:48 pm
Location: Austin, TX
Contact:

Re: css problem

Post by wlrdq » Fri Oct 09, 2009 1:40 am

Go to Content -> Article Manager and create a new article called "Music Player" or something.
Then go create a new Article menu item (call it "Music Player") in your menu and point to this article.
Then, edit your Music Player module instance and change the Menu Assignment to "Select Menu Item(s) from the List" and only select your "Music Player" menu link.

When you reload your page, your new menu item should show up with the other two on the left. When you click the "Music Player" menu item, it should show the "Music Player" article and the Music Player module should show up in whatever template position you selected.

Does this make sense?
Will Mavis - Joomla Developer
http://www.covertapps.com/jam <<< Joomla! on your Android, iPhone, iPad, and iPod Touch
If you think I can help you, PM me a link to your post and I will respond. Please don't hijack another user's thread.

nap0213
Joomla! Intern
Joomla! Intern
Posts: 51
Joined: Thu Sep 24, 2009 12:44 am

Re: css problem

Post by nap0213 » Fri Oct 09, 2009 1:50 am

Ok this is what I got, it wouldnt let me create an article without having some sort of text in it

http://150.216.55.177/napcom/,

Any recommendations for centering the music player. Also why does it have my specify an article when I create a new article link..is it asking me which article to link to? I am pretty confident it is. Thanks so much for your patience. I am learning so much!

User avatar
wlrdq
Joomla! Hero
Joomla! Hero
Posts: 2672
Joined: Thu Jul 24, 2008 12:48 pm
Location: Austin, TX
Contact:

Re: css problem

Post by wlrdq » Fri Oct 09, 2009 3:11 am

If you add tp=1 to your query string, Joomla will show you all the available template positions:
http://150.216.55.177/napcom/index.php? ... id=10&tp=1

What position is your music player module in currently (I assume right)? Try moving it to user1.

Can you just type a space in for the article text? It might not be a bad idea to give a little blurb on how to use the player or something. You can modify the parameters on your Article Menu Item to have it hide the title and other things to try to minimize what is on the page.

When you create an Article Menu Item, it is indeed asking which article to display. This way you can have a menu item that has a different name than your articles title. You can also use your articles in multiple different menus if you want.

If you try creating a Section List or Category List Menu Item, you will see that it makes you select a category/section as well.

Glad it's starting to make sense! It's confusing at first, but it gets clearer the more you use it. If you try creating a few of the other menu item types, that might help as well.

Let me know if I can help with anything else.
Will Mavis - Joomla Developer
http://www.covertapps.com/jam <<< Joomla! on your Android, iPhone, iPad, and iPod Touch
If you think I can help you, PM me a link to your post and I will respond. Please don't hijack another user's thread.

nap0213
Joomla! Intern
Joomla! Intern
Posts: 51
Joined: Thu Sep 24, 2009 12:44 am

Re: css problem

Post by nap0213 » Sat Oct 10, 2009 1:37 am

How do i post a login module for my virtumart on the home page or even my virtuemart page...mean login for store etc.? please help when you can.

Thanks again!

User avatar
wlrdq
Joomla! Hero
Joomla! Hero
Posts: 2672
Joined: Thu Jul 24, 2008 12:48 pm
Location: Austin, TX
Contact:

Re: css problem

Post by wlrdq » Sun Oct 11, 2009 10:13 pm

I believe you can just use the Joomla login module (mod_login). There may be an instance of it already created but not published. Go to Extensions -> Module Manager and search the page for mod_login. If you don't have one, click the New button and just create one.

Let me know if you need anything else.
Will Mavis - Joomla Developer
http://www.covertapps.com/jam <<< Joomla! on your Android, iPhone, iPad, and iPod Touch
If you think I can help you, PM me a link to your post and I will respond. Please don't hijack another user's thread.

nap0213
Joomla! Intern
Joomla! Intern
Posts: 51
Joined: Thu Sep 24, 2009 12:44 am

Re: css problem

Post by nap0213 » Sun Oct 11, 2009 11:24 pm

I will attempt to do such, and will report back on what happens.


Locked

Return to “Templates for Joomla! 1.5”