Custom Page Help!

[pjjw]

Hi,

So ive already tried to get help with this and they suggested asking here!

I am making a custom page and i want it to look similar to below except the pictures to be beside the text

This is what has happened using the text from my original help post!
How do i do this?




Thanks,

PJJW

[Tumbleweed]

Mar 4, 2016 7:50:07 GMT -8 pjjw said:

Hi,

So ive already tried to get help with this and they suggested asking here!

I am making a custom page and i want it to look similar to below except the pictures to be beside the text

This is what has happened using the text from my original help post!
How do i do this?




Thanks,

PJJW

Try this:




<style>
#tiny_wrap{width: 250px; height: 80px;line-height: 80px;margin:auto;border:1px solid red;}
#tiny_wrap div{ display: inline-block; vertical-align: middle; line-height: normal;}
#tiny_wrap #text{color:green;font-weight:bold;padding:8px;}
</style>


<center>    
<div id="tiny_wrap">
   <div><img src="http://i657./uu300/EliteList/Crazicons/CCFF1.png"></div>
    <div id="text">Rank List</div>
    <div><img src="http://i657./uu300/EliteList/Crazicons/CCFF1.png"></div>
</div>
</center>



I left a red border around it so you can play with the height and width but go ahead and remove that when you get it like you want. Keep the height and line height the same in that first id #tiny_wrap.

[pjjw]

Hi,

So i used this code, and it worked when aligning the pictures;



I changed the color of the text in my code, but it hasnt worked!


<style>

#tiny_wrap{width: 250px; height: 80px;line-height: 80px;margin:auto;border:1px solid red;}

#tiny_wrap div{ display: inline-block; vertical-align: middle; line-height: normal;}

#tiny_wrap #text{font-color:black;font-weight:bold;padding:8px;}

</style>





<center>    

<div id="tiny_wrap">

   <div><img src=" http://i.imgur.com/MX48lu2.png"></div>

    <div id="text">Rank List</div>

    <div><img src=" http://i.imgur.com/MX48lu2.png"></div>

</div>

</center>


[Tumbleweed]

Oh sorry, not sure what I was thinking, the css for a font color is just color. It should be:

#tiny_wrap #text{color:black;font-weight:bold;padding:8px;}

Sorry about that.

[pjjw]

Thats ok! Thank You!

[pjjw]

Ive just tried that and after saving this came up;



This is the code i have:

<style>

#tiny_wrap{width: 250px; height: 80px;line-height: 80px;margin:auto;border:1px solid red;}

#tiny_wrap div{ display: inline-block; vertical-align: middle; line-height: normal;}

#tiny_wrap #text{color:black;font-weight:bold;padding:8px;}

</style>





<center>    

<div id="tiny_wrap">

        <div id="text">Rank List</div>

    </div>

</center>





<center>    

<div id="tiny_wrap">

#tiny_wrap #text{color:black;font-weight:bold;padding:8px;}

   <div><img src=" http://i.imgur.com/MX48lu2.png"></div>

    <div id="text">Standard Ranks</div>

    <div><img src=" http://i.imgur.com/MX48lu2.png"></div>

</div>

</center>



<center>

<div id="tiny_wrap">

#tiny_wrap #text{color:black;font-weight:bold;padding:8px;}

    None of these ranks can promote.

    Rookie

    Trainee

    Agent I

    Agent II

    Agent III

    Senior Agent

    Experienced Agent

    Head Agent



-----

</div>

</center>    

[Tumbleweed]

You need to edit the css not add that.  Find that line in the css you have and just delete out the font- part


And remove these in red: (you have two that I see)


<center>

<div id="tiny_wrap">
#tiny_wrap #text{color:black;font-weight:bold;padding:8px;}
<div><img src=" i.imgur.com/MX48lu2.png"></div>
<div id="text">Standard Ranks</div>
<div><img src=" i.imgur.com/MX48lu2.png"></div>
</div>
</center>

[pjjw]

This is what shows up;



This is the code i have:



Part of it will not show in the HTML box 
Any idea why?

Thanks,
PJJW

[Tumbleweed]

The code I gave you was specific for those two images and the text inbetween. We can add a new id to the css:


<style>
#tiny_wrap{width: 250px; height: 80px;line-height: 80px;margin:auto;}
#tiny_wrap div{ display: inline-block; vertical-align: middle; line-height: normal;}
#tiny_wrap #text{color:black;font-weight:bold;padding:8px;}
#tiny_wrap_2{width: 250px; padding:8px; margin:auto;}
</style>


<center>
<div id="tiny_wrap">
<div><img src=" i.imgur.com/MX48lu2.png"></div>
<div id="text">Standard Ranks</div>
<div><img src=" i.imgur.com/MX48lu2.png"></div>
</div>
</center>

<center>
<div id="tiny_wrap_2">
None of these ranks can promote.<br><br>
Rookie<br>
Trainee<br>
Agent I<br>
Agent II<br>
Agent III<br>
Senior Agent<br>
Experienced Agent<br>
Head Agent<br>
-----
</div>
</center>

You can keep adding more to "tiny_wrap_2" and it should show everything you add or you can just repeat tiny_wrap_2 over and over again if you want to add more info.

[pjjw]

Thanks!!!

[pjjw]

Hey! Sorry to readd to this BUT How do i add my cusom pages as options to the menu bar at the top?

In addition i tried to go on one of my custom pages but it comes up with this:






here is the view from my admin area: 




have i done something wrong!!

Help Needed ASAP!

[Tumbleweed]

Mar 20, 2016 11:34:40 GMT -8 pjjw said:

Hey! Sorry to readd to this BUT How do i add my cusom pages as options to the menu bar at the top?

In addition i tried to go on one of my custom pages but it comes up with this:






here is the view from my admin area: 




have i done something wrong!!

Help Needed ASAP!

When you add the link, for the contact us custom page,  it should be like: /page/contact-us


And in case you want to have your custom pages in your nav tree instead of the menu, I create a board and then there is a slot for a re-direct. I add the link in the redirect slot with the custom page link. If they click that board, it will redirect them to your custom page.

[pjjw]

Sorry!

Do you know how i could add a custom page to the menu bar at the top of my forums?

[Tumbleweed]

Mar 20, 2016 11:45:46 GMT -8 pjjw said:

Sorry!

Do you know how i could add a custom page to the menu bar at the top of my forums?

I added more to my previous post but to add a custom page to your menu bar go to: Admin > Settings> Forum Settings and then click on the Navigation tab and you can add the new menu button and link there.

[pjjw]

Thank You!

ik this can be done on other sites but i was wondering if its possible to make a info centre a little like this:



is there anyway this can be done?