Link to the theme (http://custom.simplemachines.org/themes/index.php?lemma=2454)
(http://custom.simplemachines.org/themes/index.php/action,download/lemma,2454/image,thumb)
Fishing/Outdoors-man type theme.
This theme contains CSS3, and is not compatible with some older browsers.
Demo can be seen at: http://www.pixelmansion.com/demosite
any comments? ..... Good or bad?
I see where you were going with this. But, the colors seem a bit too sharp for my taste. A more faded look on the background image would give the impression of glass on the rest of the forum. The header wood also seems a bit too sharp, maybe try various wood patterns until you get a better look.
;)
Hope someone is still lurking here to help me with this one. I was redirected here from the "SMF Coding Discussion" page.
Can anyone tell me how I can remove the forum name from my pages (the red square in the picture)?
I have been searching for it a while......very new to css and having tough time understanding how it works compared to HTML. Using the 'gone fishing' template.
Thanks
Chips
(http://i2.photobucket.com/albums/y16/ChipsXJ/Photobucket%20Desktop%20-%20CHRIS-LAPTOP/oknameimage.jpg)
Chips
The best place to go to is www.pixelmansion.com
Speak to Deezel.
Quote from: ChipsXJ on November 18, 2012, 10:48:02 AM
Hope someone is still lurking here to help me with this one. I was redirected here from the "SMF Coding Discussion" page.
Can anyone tell me how I can remove the forum name from my pages (the red square in the picture)?
I have been searching for it a while......very new to css and having tough time understanding how it works compared to HTML. Using the 'gone fishing' template.
Thanks
Chips
In ~/Themes/GoneFishin/index.template.php, find this around line 293:
// Each tree item has a URL and name. Some may have extra_before and extra_after.
foreach ($context['linktree'] as $link_num => $tree)
Just before that, add this bit, which shifts the forum name off the link tree.
// Take off the forum name and assign it to this variable.
$forum_name = array_shift($context['linktree']);
Thanks CREW.....that got it.
Can you direct me to locate where I can change the 'page' color or remove it altogether in the white box in the image below? There is another one that appears below the opwt window That I would like to change color or remove as well. Is it on the index.template.php page as well?
Thanks again.....Chris
(http://i2.photobucket.com/albums/y16/ChipsXJ/Photobucket%20Desktop%20-%20CHRIS-LAPTOP/page.jpg)
Quote from: ChipsXJ on November 18, 2012, 12:29:24 PM
Thanks CREW.....that got it.
Can you direct me to locate where I can change the 'page' color or remove it altogether in the white box in the image below? There is another one that appears below the opwt window That I would like to change color or remove as well. Is it on the index.template.php page as well?
Thanks again.....Chris
In ~/Themes/GoneFishin/css/index.css, find this around line 491:
.pagelinks
{
padding: 0.6em 0 0.4em 0;
}
Replace it with this:
.pagelinks
{
padding: 0.6em 0 0.4em 0;
color: #fff;
}
The CREW, out. ::)
Sorry about that :-\
Did not have my contacts in.
Thank you very much CRAW ! ;D
Quote from: ChipsXJ on November 18, 2012, 01:31:03 PM
Sorry about that :-\
Did not have my contacts in.
Thank you very much CRAW ! ;D
Haha, it's cool. Glad to be of assistance. :)
FYI...............I posted an update to this issue on my original post in the SMF coding Discussion board giving you the credit. Hope that's ok.......?
http://www.simplemachines.org/community/index.php?topic=490902.0 (http://www.simplemachines.org/community/index.php?topic=490902.0)
Thanks again Craw.
That's better than fine. It's recommended. ;)
@Chips
As I said before although Craws help did er help users are usually best to ask the theme authors themselves which is why I directed you to the Pixel Mansion link.
Hey Old Fossil. I hear you.....and That's where I'll go in the future for issues in that arena.
Just felt I need to update this post that a solution was found and give him the credit.
I appreciate your direction.
Thanks
Chips
It seems to me that a person should be able to ask a question in the themes support topic. After all that is what it's for. Unless of course the author explicitly states that support will be provided from his or her own website only. Which isn't to say that there's something wrong with going directly to the source, just that these topics are here for a reason, and I see nothing wrong with using them accordingly. Just my two cents.
Also, just so there's something in this post that's relative to the topic, I do like this theme. Besides the aforementioned color issues, it's pretty slick. :)
hello again.
If someone has the time and they are so inclined to assist me............I have another issue.
I have been trying to find out where/how I can change the background of the forum insert. I like the image for the background on the page but would like to set the forum background to not be transparent but a solid color.
I have not been able to locate code where to change it.
The other thing is I have not been able to get the menu bar to center.
web address is okfishtales.com
thanks
Chip
Quote from: ChipsXJ on November 26, 2012, 01:17:03 PM
hello again.
If someone has the time and they are so inclined to assist me............I have another issue.
I have been trying to find out where/how I can change the background of the forum insert. I like the image for the background on the page but would like to set the forum background to not be transparent but a solid color.
I have not been able to locate code where to change it.
The other thing is I have not been able to get the menu bar to center.
web address is okfishtales.com
thanks
Chip
For the background, find this around line 3723 of index.css:
#bodyarea {
padding: 5px;
margin: 20px 0 0 0;
padding-left: 15px;
padding-bottom: 30px;
padding-right: 15px;
color: #444444;
box-shadow: 1px 13px 13px 8px #000000;
border-radius: 20px;
}
Put your background after border-radius, like:
border-radius: 20px;
background: #111;
For the menu, find this around line 3646 of index.css:
#topnav ul {
margin: 0;
padding: 0;
}
#topnav li {
float: left;
margin: 0;
padding: 0 0 0 2px;
position: relative;
list-style: none;
}
And replace it with this:
#topnav ul {
margin: 0;
padding: 0;
text-align: center;
}
#topnav li {
display: inline-block;
margin: 0;
padding: 0 0 0 2px;
position: relative;
list-style: none;
}
And that's all. :)
Wont work. You can't use a basic text-align to center a menu made of floated <li>'s. You have to get tricky and use relative positioning. There's a tutorial in Tips and Tricks, and I made a mod that does it for the default theme.
You can if you set the list elements to inline-block. CSS hacks FTW! ;D
Ah. Good trick.
Quote from: Antechinus on November 27, 2012, 01:54:35 AM
Ah. Good trick.
Thank you again Craw.
I really appreciate your assistance in fixing the background thing.
If I may be a pest?
The menu item I referred to was on my other site okbassncrappieclub.com
Would you mind taking a peek and see if you can tell me how to center the menu on that page?
If not.......no worries.
I do appreciate your help
Sure. It should be the exact same solution on both sites, since you're using the same theme.
not the same theme.......just used the same image for the background.
You mean that big blue one at the top there?
yes this one:
(http://i2.photobucket.com/albums/y16/ChipsXJ/menupic.jpg)
Okay, this is about the best I can do with it. Just replace the entire contents of ~/css/menu-menu.css with this, after backing up the file of course.
/*** ESSENTIAL STYLES ***/
.menu-menu, .menu-menu * {
margin:0;
padding:0;
list-style:none;
}
.menu-menu {
margin:1px 0; /* top right bottom left */
line-height:1.0;
text-align: center;
}
.menu-menu ul {
position:absolute;
top:-999em;
width:160px; /* submenu item width - offest below must match */
}
.menu-menu li {
display: inline-block;
width: auto; /* Default to 'auto'. If specified, the submenu item width and offset must match */
}
.menu-menu li a {
text-align:center;
}
.menu-menu li li a {
text-align:center;
}
.menu-menu ul li {
width:100%;
}
.menu-menu li ul {
display:none;
}
.menu-menu li:hover ul {
display:block;
}
.menu-menu li li ul {
display:none;
}
.menu-menu li:hover li:hover ul {
display:block;
}
.menu-menu li:hover {
visibility:inherit; /* fixes IE7 'sticky bug' */
}
.menu-menu li {
position:relative;
}
.menu-menu a {
display:block;
position:relative;
}
.menu-menu li:hover ul,
.menu-menu li.sfHover ul {
left:0;
top:28px; /* match top ul list item height */
z-index:2;
}
ul.menu-menu li:hover li ul,
ul.menu-menu li.sfHover li ul {
top:-999em;
}
ul.menu-menu li li:hover ul,
ul.menu-menu li li.sfHover ul {
left:160px; /* submenu offest - must match ul width above */
top:0;
}
ul.menu-menu li li:hover li ul,
ul.menu-menu li li.sfHover li ul {
top:-999em;
}
ul.menu-menu li li li:hover ul,
ul.menu-menu li li li.sfHover ul {
left:160px; /* submenu offest - must match ul width above */
top:0;
}
/*** DEMO SKIN ***/
.menu-menu {
margin-bottom:1em;
font-family:Arial Rounded MT Bold;
font-size:12px;
font-weight:normal; /* bold or normal */
font-style:normal; /* italic or normal */
}
.menu-menu a {
border-right:0px solid #000000;
border-top:0px solid #000000;
border-bottom:0px solid #000000;
padding:8px 15px;
text-decoration:none;
}
.menu-menu li.first a {
border-left:0px solid #000000;
}
.menu-menu a, .menu-menu a:visited { /* visited pseudo selector so IE6 applies text colour*/
color:#FFFFFF;
}
.menu-menu a:hover, .menu-menu a:active { /* visited pseudo selector so IE6 applies text colour*/
color:#000000;
}
.menu-menu li li a {
border:0px solid #000000; border-top-width:0;
}
.menu-menu li li li.first a {
border:0px solid #000000;
}
.menu-menu li {
background:#003366;
}
.menu-menu li li {
background:#003366;
}
.menu-menu li li li {
background:#003366;
}
.menu-menu li:hover, .menu-menu li.sfHover,
.menu-menu a:focus, .menu-menu a:hover, .menu-menu a:active {
background:#99CCFF;
outline:0;
}
.menu-menu li li a, .menu-menu li li a:visited {
color:#FFFFFF;
}
.menu-menu li li a:hover, .menu-menu li li a:active, .menu-menu li li a:focus {
color: #000000;
}
/*** arrows **/
.menu-menu a.sf-with-ul {
padding-right:2.25em;
min-width:1px; /* trigger IE7 hasLayout so spans position accurately */
}
.sf-sub-indicator {
position:absolute;
display:block;
right:.75em;
top:1.05em; /* IE6 only */
width:10px;
height:10px;
text-indent:-999em;
overflow:hidden;
background:url('../images/arrows-ffffff.png') no-repeat -10px -100px; /* 8-bit indexed alpha png. IE6 gets solid image only */
}
a > .sf-sub-indicator { /* give all except IE6 the correct values */
top:.8em;
background-position: 0 -100px; /* use translucent arrow for modern browsers*/
}
/* apply hovers to modern browsers */
a:focus > .sf-sub-indicator,
a:hover > .sf-sub-indicator,
a:active > .sf-sub-indicator,
li:hover > a > .sf-sub-indicator,
li.sfHover > a > .sf-sub-indicator {
background-position:-10px -100px; /* arrow hovers for modern browsers*/
}
/* point right for anchors in subs */
.menu-menu ul .sf-sub-indicator { background-position:-10px 0; }
.menu-menu ul a > .sf-sub-indicator { background-position:0 0; }
/* apply hovers to modern browsers */
.menu-menu ul a:focus > .sf-sub-indicator,
.menu-menu ul a:hover > .sf-sub-indicator,
.menu-menu ul a:active > .sf-sub-indicator,
.menu-menu ul li:hover > a > .sf-sub-indicator,
.menu-menu ul li.sfHover > a > .sf-sub-indicator {
background-position:-10px 0; /* arrow hovers for modern browsers*/
}
/*** shadows for all but IE6 ***/
.sf-shadow ul {
background:url('../images/shadow.png') no-repeat bottom right;
padding:0 8px 9px 0;
-moz-border-radius-bottomleft:17px;
-moz-border-radius-topright:17px;
-webkit-border-top-right-radius:17px;
-webkit-border-bottom-left-radius:17px;
}
.sf-shadow ul.sf-shadow-off {
background:transparent;
}
I do not care what anyone says.................
You are 'DA CRAW !!!!!!!!
Thank you very much............I have been banging my head for 4 days trying to get that to work like that.
In case you could not tell......I am not a programmer. ;)
Thanks again.
Chip
LOL! You're welcome; I'm glad that's what you were looking for. :D
Beastt.
May I ask how to get the first embedded page to stay at the top of the column when the height is less than the height of the 2nd embedded page?
I have tried many things but it does not seem to respond.
If I set the code as follows:
<div align="center"><embed src=http://www.okfishtales.com width="725" height="2000"></embed>
<embed src=http://www.bassresource.com width="525" height="5000"> </embed></div>
Then the first embedded page is well below the half way mark on the page while the 2nd embedded page it at the top where it should be.
Thanks
Chips
It seems to work correctly for me. I suppose you could put a line break between them for clarity.
<div align="center">
<embed src=http://www.okfishtales.com width="725" height="2000"></embed>
<br />
<embed src=http://www.bassresource.com width="525" height="5000"></embed>
</div>
Hey Craw.
The page does not have the code I want to work in place......I have the height set to the same in both. I want them to display side by side and they do with the current code.
Where the problem arises is when you view it from an ipad it displays the first page on the top and then a long ways down you see the 2nd page displayed. I was shortening the first page height so you would not have to scroll so far down....just to the bottom of the 1st page. But when I shorten the height on the first page....the top of the first page is way down in the display (over half way down the 2nd page).
initially I used iframes to display the embedded pages but the ipad was choking and would never load the site.
I was looking for the code that would force the top of the first page to be even with the top of the second page even when I had the first page height set to the shorter height of 2000.
I uploaded the code to the server now so you can see what it is doing.
Thanks
The problem is most likely that the pages are too wide to fit on a small screen side by side. You can of course set the width of each to a percentage and float one to the side, which makes them parallel. However, in doing this, anyone with a smallish screen is going to have to scroll on each embedded page to see the full width of it. I'm going to post a screenshot of what I'm talking about, as it's rather difficult to explain in text.
<div>
<embed src="http://www.okfishtales.com" style="width:48%; height:2000px; margin:1%; float:left;"></embed>
<embed src="http://www.bassresource.com" style="width:48%; height:2000px; margin:1%;"></embed>
</div>
That will work....Craw!
Can you tell me where I can move the frame/table (not sure what it is) of the forum to the left of the main page on okfishtales.com?
thanks
Chris
You can change the float from left to right.
<div>
<embed src="http://www.okfishtales.com" style="width:48%; height:2000px; margin:1%; float:right;"></embed>
<embed src="http://www.bassresource.com" style="width:48%; height:2000px; margin:1%;"></embed>
</div>
I think we're straying a little too far from the topic here. For future questions of this type (unrelated to the fishing theme) it may be better to start a topic in this (http://www.simplemachines.org/community/index.php?board=35.0) board.
I was talking about the theme......I probably did not describe it correctly.....sorry. I was referring to changing the 'margin' I think....trying to shift the forum part closer to the left side of the page (where the red arrows are in the image)
(http://i2.photobucket.com/albums/y16/ChipsXJ/margin.jpg)
I really appreciate the help yu have given me and I'm sorry if I abused that in any way,
I will post this question in that forum.........thank you for your help.
I really appreciate it, Craw....thanks
Chip
This last question is actually pertinent to the theme, so this is a good place to ask. You can change the wrapper margin to align the forum to the left side.
Find this in index.css around line 65:
/* This division wraps the entire forum when a forum width is set. */
div#wrapper
{
width: 960px;
margin: 0 auto;
padding: 0;
}
And replace it with this:
/* This division wraps the entire forum when a forum width is set. */
div#wrapper
{
width: 960px;
margin: 0 0 0 1%;
padding: 0;
}
And that should do it. ;)
Also, sorry about the topic mixup. Just trying to keep things orderly. xD
Thank you for all of your help..................without you I would have never figured that stuff out.
Craw, you are the GREATEST!
I really apprecitate your help.
Chip
I have been looking for the location to close this headspace between the red arrows.
I have not been able to figure out where it is, I guess because I do not know what it is called......#Header, maybe?
I attempted to make changes to the properties one at a time but did not see any changes to the page. tried several other places too but
it made no difference.
(http://i2.photobucket.com/albums/y16/ChipsXJ/topmargin.jpg)
Thanks
Chip
If you add this to the bottom of your css file, you'll be able to adjust the body padding, which is where that space is coming from.
body
{ padding: 0; }
Thanks again Craw.
I really do appreciate your help...................do you ever sleep? ;)
Thanks
Chip
You're welcome. And yes, I get a minimum of 8 hours every night. :P
can someone tell me how to make the logo link to a different url ?
I have looked through everything I can think of but have been unable to locate where to make the change.
(http://i2.photobucket.com/albums/y16/ChipsXJ/logoquestion4copy.jpg)
http://okfishtales.com (http://okfishtales.com)
Thanks
Chip
index.template.php of your theme.
Yep. You're gonna need to edit the link in index.template.php this time.
Find this around line 217:
<a href="', $scripturl, '">',
And replace $scripturl with your desired link location. You have to pay special attention to the quotes, because if you mess them up, you'll get a template parse error. It should look exactly like this when you're done.
<a href="http://yoursite.come/url/extension/page.html">',
The code posted is only the beginning of the line. There's a whole other pile of junk after it that isn't really relevant here.
Also, a note to theme author: It might be a good idea to keep a better check on your code indentation...
Thank you again.
I'm just asking this as a general question as a feasability inquiry.
I have the page looking like I want in both sites, The question is..........Is it possible, much work, to make the 2 sites display correctly in computer web browsers and the ipad correctly?
The ipad renders current pages for the other site with the left window window width cut off.
Just trying to decide if I should pursue or abandon the ipad compatibilty issue.
http://okfishtales.com (http://okfishtales.com) and http://okbassncrappieclub.com (http://okbassncrappieclub.com)
Thanks for all of your help Craw.
Have a good evening.
Chip
Theoretically, if you take the width out of this code in index.css, it should make the forum stick the sides of the iframe, unless it's extremely small. I dunno about the other thing on the right side.
/* This division wraps the entire forum when a forum width is set. */
div#wrapper
{
width: 960px;
margin: 0 0 0 1%;
padding: 0;
}
That did it.
Thank you.
Once again you have shown the world why you are 'Da Craw'!!!!!!
Have a great weekend
Thanks again.
Chip