Attention:

Support Rules and Guidelines
Before you post your support topic, please remember to:
  • Read the support forum rules.
  • Check the wiki and use search to see if your problem can be answered there first.
  • Link your board please, and make sure that the problem on your board is visible to guests or provide a test account.
  • Do not post Board Wrappers and CSS unless requested. With a board link, this is not necessary.
  • Be as descriptive as you can and use as many details as possible when describing your problem.
  • Please briefly mark any links to forums that may not be work-safe.
This will help ensure your support issue will be attended to in a quick and efficient manner.

  Add ReplyNew TopicNew Poll

 forum description issue
#
hi guys, this is something i always have problems with lmfao and i'm kinda /over/ it
anyway

basically, what i'm trying to do is to be able to put 2 different things into the forum description 1 being the forum desc image and / or text and some links

i could just use the subforum variable; however, a lot of the links we use aren't in subforums, and not all of the subforums i want visible on these quick navigations.
i've done this before but honestly it's just too hard!

http://peach.jcink.net/index.php?act=idx is the site link!
i'll just provide some screenshots for the sake of getting my point across /better/

ps: yes, i do have the links as a separate id's, but even if i had them under the first id, i still have trouble. now on past skins, i would usually be able to just margin it in; however, i feel with the placement of the links and the actual description area with this skin, that might be too difficult / won't work. idk. your help is appreciated!!!

how i want it:
user posted image

what it does:
user posted image
PM
#
As far as I know, most times people append the forum ID to the forum's div itself, and use that to apply a unique image using the background CSS properties in their stylesheets. As far as getting the links to appear in that little box, you could use Javascript and append the links to it, or put them in a separate element and bump it into place using CSS positioning. Alternatively, you could do some CSS hijinks using the <!-- |description| --> variable, by wrapping the description in one div, and the links in another, and adding the variable to both elements in your HTML templates and alternating which one is visible in the box with display:none;
PM
#
Dusty
thank you for responding at such a quick manner, but i actually don't really understand what you're asking me to do XD forgive me, i'm pretty "new" at coding, this is probably my fifth/six skin i've done.
Would you be able to show me what you're suggesting? Thank you in advance!
PM
#
For sure! Can you post your category header and forum row templates? It'll be easier to show you what I mean if I can see what you're already doing.
PM
#
of course!! thank you c: i don't know if you want the css too, but it's included

category:
CODE

<style>

#yhf2ch {
height: 150px;
width: 932px;
background-color: rgba(118, 170, 215, 0.3);
outline: 1px solid #bababa;
}


#yhf2ch .title {
display: inline-block;
text-align: center;
font-family: 'Montserrat', sans-serif;
font-size: 40px;
color: #555;
font-weight: 400;
text-transform: lowercase;
font-style: italic;
position: relative;
top: 45px;
width: 932px;
}


</style>
<div id="yhf2ch">

<div class="title">< <!-- |cat_name| --> ></div>

</div>
<% FORUM_ROWS %>


forum row:
CODE

<style>
#yhf2fr {
   width: 930px;
   height: 180px;
   margin: 10px auto 0px auto;
   background: #fff;
   outline: 1px solid #bababa;
}
#yhf2fr .b1 {
   width: 250px;
   height: 180px;
   background-color: rgba(118, 170, 215, 0.3);
   border-right: 1px solid #bababa;
   float: left;
   position: relative;
   left: 0px;
   top: 0px;
}
#yhf2fr .title {
   width: 200px;
   padding: 10px;
   height: auto;
   font-family: montserrat;
   font-size: 9px;
   font-weight: 400;
   color: #555;
   text-align: left;
   text-transform: uppercase;
   letter-spacing: 1px;
   background-color: #eee;
   outline: 1px solid #bababa;
   margin-top: 10px;
   margin-left: 2px;
}
#yhf2fr .title2 {
   width: 200px;
   padding: 10px;
   height: auto;
   font-family: montserrat;
   font-size: 9px;
   font-weight: 400;
   color: #555;
   text-align: right;
   text-transform: uppercase;
   letter-spacing: 1px;
   background-color: #eee;
   outline: 1px solid #bababa;
   margin-top: -4px;
   margin-left: 2px;
}
#yhf2fr .intro2 {
   width: 190px;
   padding: 15px;
   height: 60px;
   background-color: #eee;
   margin-top: -3px;
   margin-left: 1px;
   border-left: 1px solid #bababa;
   border-bottom: 1px solid #bababa;
   border-right: 1px solid #bababa;
   text-align: justify;
   font-family: montserrat;
   font-weight: 400;
   font-size: 10px;
   color: #555;
}
#yhf2fr .intro3 {
   width: 220px;
   height: 85px;
   background-color: #eee;
   margin-top: -3px;
   margin-left: 1px;
   border-left: 1px solid #bababa;
   border-bottom: 1px solid #bababa;
   border-right: 1px solid #bababa;
   text-align: justify;
   font-family: montserrat;
   font-weight: 400;
   font-size: 10px;
   color: #555;
}
#yhf2fr .overflow {
   width: 180px;
   padding-right: 10px;
   height: 60px;
   overflow: auto;
}
#quicklinks {
   font-weight: bold;
   font-size: 8px;
   line-height: 20px;
   text-align: left;
   width: 930px;
   height: 30px;
   background-color: #eee;
   text-transform: uppercase;
   font-family: 'Montserrat', sans-serif;
   border: 1px solid #bababa;
   letter-spacing: 1px;
   word-spacing: 3px;
   color: #000;
   position: relative;
   margin-left: -1px;
   margin-bottom: 10px;
}
#quicklinks .b2 {
   width: 250px;
   height: 25px;
   background-color: rgba(118, 170, 215, 0.5);
   float: left;
   font-family: montserrat;
   font-size: 13px;
   font-weight: 300;
   border-right: 1px solid #bababa;
   color: #555;
   text-align: center;
   text-transform: uppercase;
   font-style: italic;
   letter-spacing: 2px;
   padding-top: 5px;
}
#quicklinks .links {
   font-family: 'Poppins', sans-serif;
   font-size: 11px;
   font-weight: 500;
   color: #555;
   text-transform: uppercase;
   text-align: right;
   padding: 5px 30px 0px 0px;
}
#yhf2fr .forumname {
  font-family: 'Montserrat', sans-serif;
   font-size: 30px;
   font-weight: 400;
   color: #555;
   padding-top: 60px;
margin-left: 60px;
   text-transform: uppercase;
   text-align: left;
   display: inline-block; border-bottom: 3px solid #76aad7;
}
#yhf2fr .fname {
width: 680px;
height: 180px;
background-color: #fff;
padding-right: 3px;
border-bottom: 1px solid #bababa;
margin-left: 250px;
}
#yhf2fr .fsub {
font-family: 'Poppins', sans-serif;
   font-size: 11px;
   font-weight: 500;
   color: #555;
   text-transform: uppercase;
text-align: left;
margin-top: 10px;
margin-left: 60px;

}

#yhf2fr .forumname i {
color: #76aad7;
font-weight: 600;
font-size: 15px;
padding-left: 3px;
margin-right: 10px;
}
#yhf2fr .rf {
float: right;
font-size: 13px;
margin-top: -1px;
}

#yhf2fr .lf {
float: left;
font-size: 13px;
margin-top: -1px;
}

#yhf2fr .fsub b {
border-bottom: 1px solid #000;
font-weight: normal;
}

</style>
<div id="yhf2fr">
<div class="b1">
<center><table><td><div class="title"> < <!-- |replies| --> replies > <div class="rf"> <i class="fa fa-bolt" aria-hidden="true"></i> </div> </div></td>
<tr><td> <!-- |description| --> </td></tr>

<tr><td><div class="title2"><div class="lf"><i class="fa fa-thumbs-o-up" aria-hidden="true"></i></div> <  <!-- |topics| --> topics > </div></td></tr>
</table></div></center>

<div class="fname"><div class="forumname"><i class="fa fa-tint" aria-hidden="true"></i> <!-- |name| --> </div>

<div class="fsub"> < <B><!-- |last_topic| --></b>  by <B><!-- |last_poster| --></b>  at  <b><!-- |last_post| --></b> > </div></div>

</div>

<div id="quicklinks"><div class="b2">navigation:</div> <div class="links"><a href="link here">lol</a> <a href="link here">lol</a> <a href="link here">lol</a> <a href="link here">lol</a> <a href="link here">lol</a> </div></div>

PM
#
So! Firstly, neeeever use IDs in a repeating template. Technically, they'll still render okay and all that, but IDs are only ever supposed to appear once on an entire page.

Secondly, if you'd like, you can also make the entire forum row a table, instead of using positioning and exact dimensions to get the end result.

Thiiirdly, the center tag is pretty outdated, so I replaced it with margin:auto;

Anyways, to get an image in place of the description, add it to the background property of the correct forum ID (.fdi-1, .fdi-2, etc). To get the links where they should be in the navigation bar, you'll need to separate them inside the forum description. If your forum's description was:
CODE
blah blah blah, I'm a forum description, and now for some non-subforum links <a href="blah">link1</a><a href="blah2">link2</a>


You would split it like so:

CODE
<div class="desctext">blah blah blah, I'm a forum description, and now for some non-subforum links</div>
<div class="desclinks"><a href="blah">link1</a><a href="blah2">link2</a></div>


And CSS should take care of the rest for you.

If I made a goof, just lemme know!

Forum row:
CODE
<style>
.yhf2fr {
  width: 930px;
  height: 180px;
  margin: 10px auto 0px auto;
  background: #fff;
  outline: 1px solid #bababa;
}
.yhf2fr .b1 {
  width: 250px;
  height: 180px;
  background-color: rgba(118, 170, 215, 0.3);
  border-right: 1px solid #bababa;
  float: left;
  position: relative;
  left: 0px;
  top: 0px;
}
.yhf2fr .title {
  width: 200px;
  padding: 10px;
  height: auto;
  font-family: montserrat;
  font-size: 9px;
  font-weight: 400;
  color: #555;
  text-align: left;
  text-transform: uppercase;
  letter-spacing: 1px;
  background-color: #eee;
  outline: 1px solid #bababa;
  margin-top: 10px;
  margin-left: 2px;
}
.yhf2fr .title2 {
  width: 200px;
  padding: 10px;
  height: auto;
  font-family: montserrat;
  font-size: 9px;
  font-weight: 400;
  color: #555;
  text-align: right;
  text-transform: uppercase;
  letter-spacing: 1px;
  background-color: #eee;
  outline: 1px solid #bababa;
  margin-top: -4px;
  margin-left: 2px;
}
.yhf2fr .intro2 {
  width: 190px;
  padding: 15px;
  height: 60px;
  background-color: #eee;
  margin-top: -3px;
  margin-left: 1px;
  border-left: 1px solid #bababa;
  border-bottom: 1px solid #bababa;
  border-right: 1px solid #bababa;
  text-align: justify;
  font-family: montserrat;
  font-weight: 400;
  font-size: 10px;
  color: #555;
}
.yhf2fr .intro3 {
  width: 220px;
  height: 85px;
  background-color: #eee;
  margin-top: -3px;
  margin-left: 1px;
  border-left: 1px solid #bababa;
  border-bottom: 1px solid #bababa;
  border-right: 1px solid #bababa;
  text-align: justify;
  font-family: montserrat;
  font-weight: 400;
  font-size: 10px;
  color: #555;
}
.yhf2fr .overflow {
  width: 180px;
  padding-right: 10px;
  height: 60px;
  overflow: auto;
}
.quicklinks {
  font-weight: bold;
  font-size: 8px;
  line-height: 20px;
  text-align: left;
  width: 930px;
  height: 30px;
  background-color: #eee;
  text-transform: uppercase;
  font-family: 'Montserrat', sans-serif;
  border: 1px solid #bababa;
  letter-spacing: 1px;
  word-spacing: 3px;
  color: #000;
  position: relative;
  margin-left: -1px;
  margin-bottom: 10px;
}
.quicklinks .b2 {
  width: 250px;
  height: 25px;
  background-color: rgba(118, 170, 215, 0.5);
  float: left;
  font-family: montserrat;
  font-size: 13px;
  font-weight: 300;
  border-right: 1px solid #bababa;
  color: #555;
  text-align: center;
  text-transform: uppercase;
  font-style: italic;
  letter-spacing: 2px;
  padding-top: 5px;
}
.quicklinks .links {
  font-family: 'Poppins', sans-serif;
  font-size: 11px;
  font-weight: 500;
  color: #555;
  text-transform: uppercase;
  text-align: right;
  padding: 5px 30px 0px 0px;
}
.yhf2fr .forumname {
 font-family: 'Montserrat', sans-serif;
  font-size: 30px;
  font-weight: 400;
  color: #555;
  padding-top: 60px;
  margin-left: 60px;
  text-transform: uppercase;
  text-align: left;
  display: inline-block; border-bottom: 3px solid #76aad7;
}
.yhf2fr .fname {
   width: 680px;
   height: 180px;
   background-color: #fff;
   padding-right: 3px;
   border-bottom: 1px solid #bababa;
   margin-left: 250px;
}
.yhf2fr .fsub {
font-family: 'Poppins', sans-serif;
font-size: 11px;
font-weight: 500;
color: #555;
text-transform: uppercase;
text-align: left;
margin-top: 10px;
margin-left: 60px;
}
.yhf2fr .forumname i {
color: #76aad7;
font-weight: 600;
font-size: 15px;
padding-left: 3px;
margin-right: 10px;
}
.yhf2fr .rf {
float: right;
font-size: 13px;
margin-top: -1px;
}
.yhf2fr .lf {
float: left;
font-size: 13px;
margin-top: -1px;
}
.yhf2fr .fsub b {
border-bottom: 1px solid #000;
font-weight: normal;
}
.b1 table {
margin: auto;
}
.fdesc {
width:220px;
height:85px;
}
.fdi-1 {
background: gray;
}
.fdi-3 {
background: red;
}
.fdesc .desclinks, .links .desctext {
display:none;
}

</style>
<div class="yhf2fr">
   <div class="b1">
           <table>
   <tr>
    <td>
     <div class="title">
      < <!-- |replies| --> replies >
       <div class="rf">
        <i class="fa fa-bolt" aria-hidden="true"></i>
       </div>
     </div>
    </td>
   </tr>
               <tr>
                   <td>
     <div class="fdesc fdi-<!-- |forum_id| -->">
      <!-- |description| -->
     </div>
                   </td>
               </tr>
               <tr>
                   <td>
                       <div class="title2">
                           <div class="lf">
       <i class="fa fa-thumbs-o-up" aria-hidden="true"></i>
                           </div>
                           < <!-- |topics| --> topics > </div>
                   </td>
               </tr>
           </table>
   </div>

   <div class="fname">
       <div class="forumname"><i class="fa fa-tint" aria-hidden="true"></i>
           <!-- |name| -->
       </div>

       <div class="fsub">
           < <B>
               <!-- |last_topic| -->
               </b> by
               <B><!-- |last_poster| --></b> at <b><!-- |last_post| --></b> > </div>
   </div>

</div>

<div class="quicklinks">
   <div class="b2">navigation:</div>
   <div class="links"><!-- |description| --></div>
</div>


Category header:
CODE

<style>

.yhf2ch {
height: 150px;
width: 932px;
background-color: rgba(118, 170, 215, 0.3);
outline: 1px solid #bababa;
}


.yhf2ch .title {
display: inline-block;
text-align: center;
font-family: 'Montserrat', sans-serif;
font-size: 40px;
color: #555;
font-weight: 400;
text-transform: lowercase;
font-style: italic;
position: relative;
top: 45px;
width: 932px;
}


</style>
<div class="yhf2ch, cat-<!-- |cat_id| -->">

<div class="title">< <!-- |cat_name| --> ></div>

</div>
<% FORUM_ROWS %>



PM
#
wow!! thank you so much, that worked like a charm http://files.b1.jcink.com/html/emoticons/biggrin.gif I really appreciate it.
i had no idea we couldn't use forum id's for them, i've always used them but good to know i can just use classes!
one question:
i get how to do the forum description images and such now, but how would i go about if i wanted subforums to have images?
PM
#
Should be the same way! Subforums have forum ID numbers too, so you should be able to use .fdi-X with a background image.
PM
#
PERFECT
lmfao i just didn't realise the forum id was the number in the address bar so i wasn't sure where those numbers were coming from
again, thank you so much!!!
i'm gonna call this solved c:
PM
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:
Share this topic:
« Next Oldest | General Support | Next Newest »

Options Add ReplyNew TopicNew Poll