GoneFishin

[PixelMansion]

Link to the theme


Fishing/Outdoors-man type theme.
This theme contains CSS3, and is not compatible with some older browsers.
Demo can be seen at: hxxp:www.pixelmansion.com/demosite [nonactive]

[PixelMansion]

any comments? ..... Good or bad?

[ARG01]

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.

[ChipsXJ]

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

[TheListener]

Chips

The best place to go to is www.pixelmansion.com

Speak to Deezel.

[The Craw]

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:

Code Select Expand


// 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.

Code Select Expand


// Take off the forum name and assign it to this variable.
$forum_name = array_shift($context['linktree']);


[ChipsXJ]

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

[The Craw]

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:

Code Select Expand


.pagelinks
{
padding: 0.6em 0 0.4em 0;
}


Replace it with this:

Code Select Expand


.pagelinks
{
padding: 0.6em 0 0.4em 0;
color: #fff;
}


The CREW, out. 

[ChipsXJ]

Sorry about that 
Did not have my contacts in.

Thank you very much CRAW ! 

[The Craw]

Sorry about that 
Did not have my contacts in.

Thank you very much CRAW ! 

Haha, it's cool. Glad to be of assistance.

[ChipsXJ]

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

Thanks again Craw.

[The Craw]

That's better than fine. It's recommended.

[TheListener]

@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.

[ChipsXJ]

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

[The Craw]

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.

[ChipsXJ]

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 [nofollow]

thanks
Chip

[The Craw]

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:

Code Select Expand


#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:

Code Select Expand


border-radius: 20px;
background: #111;




For the menu, find this around line 3646 of index.css:

Code Select Expand


#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:

Code Select Expand


#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.

[Antechinus]

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.

[The Craw]

You can if you set the list elements to inline-block. CSS hacks FTW! 

[Antechinus]

Ah. Good trick.

[ChipsXJ]

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 [nofollow]

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

[The Craw]

Sure. It should be the exact same solution on both sites, since you're using the same theme.

[ChipsXJ]

not the same theme.......just used the same image for the background.

[The Craw]

You mean that big blue one at the top there?

[ChipsXJ]

yes this one:

[The Craw]

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.

Code Select Expand


/*** 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;
}


[ChipsXJ]

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

[The Craw]

LOL! You're welcome; I'm glad that's what you were looking for.

[Matthew K.]

Beastt.

[ChipsXJ]

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 [nofollow] width="725" height="2000"></embed>
<embed src=http://www.bassresource.com [nofollow] 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

[The Craw]

It seems to work correctly for me. I suppose you could put a line break between them for clarity.

Code Select Expand


<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>


[ChipsXJ]

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 Craw]

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.

Code Select Expand


<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>


[ChipsXJ]

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 [nofollow]?

thanks
Chris

[The Craw]

You can change the float from left to right.

Code Select Expand


<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 board.

[ChipsXJ]

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)

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

[The Craw]

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:

Code Select Expand


/* 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:

Code Select Expand


/* 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. 

[The Craw]

Also, sorry about the topic mixup. Just trying to keep things orderly. xD

[ChipsXJ]

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

[ChipsXJ]

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.


Thanks
Chip

[The Craw]

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.

Code Select Expand


body
{ padding: 0; }


[ChipsXJ]

Thanks again Craw.

I really do appreciate your help...................do you ever sleep?


Thanks
Chip

[The Craw]

You're welcome. And yes, I get a minimum of 8 hours every night.

[ChipsXJ]

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://okfishtales.com [nofollow]

Thanks
Chip

[Matthew K.]

index.template.php of your theme.

[The Craw]

Yep. You're gonna need to edit the link in index.template.php this time.

Find this around line 217:

Code Select Expand


<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.

Code Select Expand


<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...

[ChipsXJ]

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 [nofollow] and http://okbassncrappieclub.com [nofollow]
Thanks for all of your help Craw.

Have a good evening.
Chip

[The Craw]

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.

Code Select Expand


/* This division wraps the entire forum when a forum width is set. */
div#wrapper
{
width: 960px;
margin: 0 0 0 1%;
padding: 0;
}


[ChipsXJ]

That did it.

Thank you.

Once again you have shown the world why you are 'Da Craw'!!!!!!

Have a great weekend
Thanks again.
Chip