The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.

Styling Boxes

4 posters

Go down

Styling Boxes Empty Styling Boxes

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

OK. so here's my dilemma. 

I am trying to make a box like this >>> Styling Boxes Canvas10

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



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

Male Posts : 585
Reputation : 32
Language : English, Russian, Ukrainian
Location : St. Somewhere

http://www.worldofmutants.forumotion.com

Back to top Go down

Styling Boxes Empty Re: Styling Boxes

Post by _Twisted_Mods_ 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_
_Twisted_Mods_
Helper
Helper

Male Posts : 2083
Reputation : 336
Language : English
Location : Ms

http://liquidcode.forumotion.com

Back to top Go down

Styling Boxes Empty Re: Styling Boxes

Post by Asriel 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
Asriel
Forumember

Male Posts : 585
Reputation : 32
Language : English, Russian, Ukrainian
Location : St. Somewhere

http://www.worldofmutants.forumotion.com

Back to top Go down

Styling Boxes Empty Re: Styling Boxes

Post by _Twisted_Mods_ 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_
_Twisted_Mods_
Helper
Helper

Male Posts : 2083
Reputation : 336
Language : English
Location : Ms

http://liquidcode.forumotion.com

Back to top Go down

Styling Boxes Empty Re: Styling Boxes

Post by \isogriv.\ 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.\
\isogriv.\
Forumember

Posts : 31
Reputation : 4
Language : English

http://alciem.forumotion.com

Back to top Go down

Styling Boxes Empty Re: Styling Boxes

Post by Asriel 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
Asriel
Forumember

Male Posts : 585
Reputation : 32
Language : English, Russian, Ukrainian
Location : St. Somewhere

http://www.worldofmutants.forumotion.com

Back to top Go down

Styling Boxes Empty Re: Styling Boxes

Post by Ikerepc 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
Ikerepc
Active Poster

Male Posts : 1187
Reputation : 167
Language : Who cares...
Location : Where web help & support is needed

http://admins.forumotion.com

Back to top Go down

Back to top

- Similar topics

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