The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Styling Boxes

View previous topic View next topic Go down

Styling Boxes

Post by Asriel on January 11th 2015, 7:49 pm

OK. so here's my dilemma.

I am trying to make a box like this >>>

So far, I've got the right idea i think. Here's my attempt. >>>>



Also, this is the code i've got so far in CSS. But my problem is trying to lower the number and bolding it. Make it stand out.

Code:
.replies {
 border: 1px solid;
 height: 54px;
 width: 54px;
 text-align: center;
 text-weight: bold;
}

So, any help with styling would be greatly appreciated. Thank you!

Asriel
Forumember

Male Posts : 583
Reputation : 30
Language : English, Russian, Ukrainian
Location : St. Somewhere

http://www.worldofmutants.forumotion.com

Back to top Go down

Re: Styling Boxes

Post by _Twisted_Mods_ on January 11th 2015, 7:58 pm

try using box-shadow instead of border

box-shadow: 0px 0px 5px black;

and you can make it bolder by adding more shadow


box-shadow: 0px 0px 5px black, 0px 0px 5px black, 0px 0px 5px black;

_Twisted_Mods_
Helper
Helper

Male Posts : 2032
Reputation : 302
Language : English
Location : Ms

http://liquidcode.forumotion.com

Back to top Go down

Re: Styling Boxes

Post by Asriel on January 11th 2015, 8:11 pm

i still need to bring the number down to the center. It's too high up and i would like it more centered at the bottom

Asriel
Forumember

Male Posts : 583
Reputation : 30
Language : English, Russian, Ukrainian
Location : St. Somewhere

http://www.worldofmutants.forumotion.com

Back to top Go down

Re: Styling Boxes

Post by _Twisted_Mods_ on January 11th 2015, 8:22 pm

not quite sure how you have it setup but you can try

Code:

margin-top:auto;
margin-bottom:auto;

if that dont work try


Code:

margin-top:5px;


_Twisted_Mods_
Helper
Helper

Male Posts : 2032
Reputation : 302
Language : English
Location : Ms

http://liquidcode.forumotion.com

Back to top Go down

Re: Styling Boxes

Post by \isogriv.\ on January 11th 2015, 8:23 pm

Code:
.replies {
width: 50px;
height: 38px;
margin-left: 5px;
background-color: #d8d8d8;
color: #181818;
font-size: 8px;
font-weight: bold;
text-align: center;
padding: 12px 2px 2px 2px;
}

The provided code should be nearly exactly like the box shown in the first image.

\isogriv.\
Forumember

Posts : 31
Reputation : 4
Language : English

http://alciem.forumotion.com

Back to top Go down

Re: Styling Boxes

Post by Asriel on January 11th 2015, 8:41 pm

i dont know if it matters, but is there a section in templates in Topics that shows count of replies box. Because that's where i am styling the box.

Asriel
Forumember

Male Posts : 583
Reputation : 30
Language : English, Russian, Ukrainian
Location : St. Somewhere

http://www.worldofmutants.forumotion.com

Back to top Go down

Re: Styling Boxes

Post by Ikerepc on January 15th 2015, 12:01 pm

yes, there is. You have phpbb 2?


If yes do next:

At index_box template
Change this:
Code:
      <th nowrap="nowrap" width="50">{L_TOPICS}</th>
      <th nowrap="nowrap" width="50">{L_POSTS}</th>

With this:
Code:
<th nowrap="nowrap" width="100">Statistics</th>


Then replace this:
Code:
      <td class="row3" align="center" valign="middle" height="50">
         <span class="gensmall">{catrow.forumrow.TOPICS}</span>
      </td>
      <td class="row2" align="center" valign="middle" height="50">
         <span class="gensmall">{catrow.forumrow.POSTS}</span>
      </td>

With this:
Code:
      <td class="row3" align="center" valign="middle" height="50">
                  <span class="gensmall"><table><tr><td><div class="kutija"><span class="broj">{catrow.forumrow.TOPICS}</span><br />Threads</div></td></tr><tr><td><div class="kutija"><span class="broj">{catrow.forumrow.POSTS}</span><br />Posts</div></td></tr></table></span>
      </td>


And add this to css:
Code:
.kutija {
  width: 50px;
  height: 50px;
  background: gray;
  text-align: center;
  padding-bottom: 5px;
  padding-top: 20px;
  padding-left: 10px;
  padding-right: 10px;
}
.broj {
  font-weight: bold;
  font-size: 14px;
}

Ikerepc
Active Poster

Male Posts : 1114
Reputation : 152
Language : Croatian, HTML, CSS, jQuery, JavaScript, PHP, SQL, Bascom, Python, C, FBD & LAD for PLC and more... Little English :D
Location : Around electronics and progmamming ;)

http://help.forumotion.com

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum