Runboard.com
You're welcome.
Runboard Extra! The Runboard Directory Runboard Knowledge Base
Chat room Runboard Knowledge Base (wiki) Search Facebook Twitter

runboard.com       You are not logged in.

Page:  1  2  3  4  5 ... 8  9  10 

 
Lesigner Girl Profile
Live feed
Blog
Friends
Miscellaneous info

Global Administrator
Global user (premium)
Head of Runboard staff

Registered: 11-2005
Posts: 24201
Karma: 418 (+464/-46)
Reply | Quote
Re: Anyone Have Some Fresh Ideas for Board Design?


It looks like you fixed it after you posted here. Am I correct? It looks good in Firefox. emoticon

---
Runboard Knowledge Base
Website Creation Tutorials
5/21/2015, 5:37 am Link to post Email Lesigner Girl   PM Lesigner Girl Blog
 
OldWarrior Profile
Live feed
Blog
Friends
Miscellaneous info

Jack of All Trades,
Master of Some

Global user (premium)

Registered: 04-2006
Location: USA, Western hemisphere, earth
Posts: 179
Karma: 18 (+18/-0)
Reply | Quote
Re: Anyone Have Some Fresh Ideas for Board Design?


quote:

Lesigner Girl wrote:

It looks like you fixed it after you posted here. Am I correct? It looks good in Firefox. emoticon



Well, maybe it had to do with my browser's cache or something. I honestly did nothing after that post. Anyway, it looks like I am well on my way to getting the new and improved sidebar into the Warhammer Quest board.

Thanks again, LG, for your assistance.

---
Old Warrior

Check out Bible Notes
It is one of my favorite places on the Internet.
God bless you, everyone!
5/21/2015, 2:28 pm Link to post Email OldWarrior   PM OldWarrior Blog
 
Lesigner Girl Profile
Live feed
Blog
Friends
Miscellaneous info

Global Administrator
Global user (premium)
Head of Runboard staff

Registered: 11-2005
Posts: 24201
Karma: 418 (+464/-46)
Reply | Quote
Re: Anyone Have Some Fresh Ideas for Board Design?


You're welcome, OldWarrior. emoticon

In this part of the HTML, you should remove the part I greyed out, and add the part in red:

<div id="important">


    <p><font color=red>Please read the rules topic below before
      posting for the first time.</font></p>

    <ul>
      <li><a href="[sign in to see URL]">Posting Suggestions & Rules</a></li>
      <li><a href="[sign in to see URL]">Authors/Contributors List</a></li>
    </ul>

</div>



Notice there is only one <p> inside that <div>, which has the id of "important", so we'll target it with #important p. In your CSS, add this:

#important p { color: red; }


That will make important paragraphs red. emoticon

I would normally use #f00 or #ff0000 for red, but the word works, too.

<ul> means unordered list.
<li> means list item.

List items can only be part of an unordered list or an ordered list.


When you add the welcome to the top of the board, you can give it an id of "welcome":

<div id="welcome">

~ ~ Welcome to the Warhammer Quest message board! ~ ~<br />
~ ~ Updates to this board's design are in the works. Check in frequently to see the improvements! ~ ~
</div>


Then style it in your CSS like this:

#welcome {

   color: #080;
   font-weight: bold;
   text-align: center;
}


---
Runboard Knowledge Base
Website Creation Tutorials
5/21/2015, 4:02 pm Link to post Email Lesigner Girl   PM Lesigner Girl Blog
 
OldWarrior Profile
Live feed
Blog
Friends
Miscellaneous info

Jack of All Trades,
Master of Some

Global user (premium)

Registered: 04-2006
Location: USA, Western hemisphere, earth
Posts: 179
Karma: 18 (+18/-0)
Reply | Quote
Re: Anyone Have Some Fresh Ideas for Board Design?


Excellent! Thanks for the further help.

So, I am beginning to see the reason and relationship between all these labels (id="important" and the like). emoticon

By the way, the sidebar is still appearing at the bottom when I view it in IE. I use IE 11.

It all looks great in my ipad so far.

Last edited by OldWarrior, 5/21/2015, 5:02 pm


---
Old Warrior

Check out Bible Notes
It is one of my favorite places on the Internet.
God bless you, everyone!
5/21/2015, 4:10 pm Link to post Email OldWarrior   PM OldWarrior Blog
 
Lesigner Girl Profile
Live feed
Blog
Friends
Miscellaneous info

Global Administrator
Global user (premium)
Head of Runboard staff

Registered: 11-2005
Posts: 24201
Karma: 418 (+464/-46)
Reply | Quote
Re: Anyone Have Some Fresh Ideas for Board Design?


IE always was a pain. Try adding this where #sidebar is defined:

float: left;


Yes, CSS targeting is one use for IDs. You can also use them for anchor targeting:

[sign in to see URL]#footer

Another is for javascript targeting:

onclick="$('#important').toggleClass('expand');"

This onclick function is defined in a jquery file that Thor included on every page. It says to look for something with the id of "important", which is here:

<div id="important">


    <p>Please read the rules topic below before posting for the first time.</p>

    <ul>
      <li><a href="[sign in to see URL]">Posting Suggestions & Rules</a></li>
      <li><a href="[sign in to see URL]">Authors/Contributors List</a></li>
    </ul>

</div>


Then, it adds the class name of "expand" if it isn't there, and removes "expand" if it is there.

--Log in or sign up to see linked image content--


    <p>Please read the rules topic below before posting for the first time.</p>

    <ul>
      <li><a href="[sign in to see URL]">Posting Suggestions & Rules</a></li>
      <li><a href="[sign in to see URL]">Authors/Contributors List</a></li>
    </ul>

</div>


That div is inside another div with the id of "nav". The following CSS hides every div inside #nav, including that one.

#nav div {

    display: none;
}


When the "expand" class is added to a div, this CSS takes over:

#nav [sign in to see URL] {

    display: block;
}


Every <h2> inside the sidebar has an onclick, each targeting a different div.

<h2 onclick="$('#whq-fan-websites').toggleClass('expand');">WHQ Fan Websites</h2>
<h2 onclick="$('#poll-topics').toggleClass('expand');">Poll Topics</h2>
<h2 onclick="$('#gaming-tools').toggleClass('expand');">Gaming Tools</h2>

After each <h2> is a div with an ID that corresponds with the onclick, so clicking on WHQ Fan Websites will toggle <div id="whq-fan-websites">, clicking on Poll Topics will toggle <div id="poll-topics">, and clicking on Gaming Tools will toggle <div id="gaming-tools">.

You can only have one of any ID on a page. You can have one #header, one #footer, one #sidebar, one #welcome, one #whq-fan-websites, etc. If you want to use something more than once, you can give it a class instead. For example, posts have class names instead of IDs because they repeat.

With the onclicks in the sidebar, the divs all toggle the same class name, "expand". This is because we want to do the same thing with all of them, which is make them show up when their corresponding <h2> is clicked on.

When targeting a class in your CSS, you use a dot instead of a hash tag.

#welcome {
   color: #080;
   font-weight: bold;
   text-align: center;
}
.expand {
   display: block;
}

I hope this helps. emoticon

---
Runboard Knowledge Base
Website Creation Tutorials
5/21/2015, 5:14 pm Link to post Email Lesigner Girl   PM Lesigner Girl Blog
 
OldWarrior Profile
Live feed
Blog
Friends
Miscellaneous info

Jack of All Trades,
Master of Some

Global user (premium)

Registered: 04-2006
Location: USA, Western hemisphere, earth
Posts: 179
Karma: 18 (+18/-0)
Reply | Quote
Re: Anyone Have Some Fresh Ideas for Board Design?


The addition of float: left; seems to have repaired the problem.

I can see where using the CSS to format things can really save a lot of detailed html coding.

Last edited by OldWarrior, 5/21/2015, 5:21 pm


---
Old Warrior

Check out Bible Notes
It is one of my favorite places on the Internet.
God bless you, everyone!
5/21/2015, 5:21 pm Link to post Email OldWarrior   PM OldWarrior Blog
 
Lesigner Girl Profile
Live feed
Blog
Friends
Miscellaneous info

Global Administrator
Global user (premium)
Head of Runboard staff

Registered: 11-2005
Posts: 24201
Karma: 418 (+464/-46)
Reply | Quote
Re: Anyone Have Some Fresh Ideas for Board Design?


Great! emoticon

Yes, using CSS to separate styling from content makes it much easier to work with and uses less code. emoticon

---
Runboard Knowledge Base
Website Creation Tutorials
5/21/2015, 5:39 pm Link to post Email Lesigner Girl   PM Lesigner Girl Blog
 
OldWarrior Profile
Live feed
Blog
Friends
Miscellaneous info

Jack of All Trades,
Master of Some

Global user (premium)

Registered: 04-2006
Location: USA, Western hemisphere, earth
Posts: 179
Karma: 18 (+18/-0)
Reply | Quote
Re: Anyone Have Some Fresh Ideas for Board Design?


I put a place holder in my css for a background image in the welcome message area: Background: none;

I plan for this image to be in addition to the community logo -- which I think most people would want to keep; but, something really beautiful -- eye candy, would probably help to make the board much more appealing.

This will help me to find where I will be putting the image later.

By the way, I wonder how to obtain a suitable image properly. My understanding of copyright is limited... but the following is what I think I know after searching and reading a bit.

I learned that as soon as someone creates an image by just about any method it has an implied copyright -- it belongs to them. So, I assume this means that one must get permission from the one who created the image unless permission is already given, it is implied in the purchase of an image, or the image has existed long enough that it has somehow become the public domain. Whew!

Maybe I should just become an artist and make my own image! emoticon

IF I want to change the expand effect to happen upon hovering over the division text in the sidebar (the way I think the Mystery skin sidebar works), how would I modify the css and html? I suspect the following things might need changed (obviously the onclick since no clicking needed):

CSS

#nav [sign in to see URL] {

    display: block;
}


HTML

<div id="nav">

           <h2 onclick="$('#important-stuff').toggleClass('expand');">Important Stuff</h2>



Last edited by OldWarrior, 5/22/2015, 3:31 am


---
Old Warrior

Check out Bible Notes
It is one of my favorite places on the Internet.
God bless you, everyone!
5/22/2015, 3:04 am Link to post Email OldWarrior   PM OldWarrior Blog
 
Lesigner Girl Profile
Live feed
Blog
Friends
Miscellaneous info

Global Administrator
Global user (premium)
Head of Runboard staff

Registered: 11-2005
Posts: 24201
Karma: 418 (+464/-46)
Reply | Quote
Re: Anyone Have Some Fresh Ideas for Board Design?


To find images, search for "open source" and "public domain". Here's a list I found just now: ]13 Free/Open Fantasy Art Sources. Make sure to double check each source to make sure they are free for anyone to use. Some might also require some type of attribution. See the bottom of ]this page for the different licenses.

I'll have some code for you later, if PR doesn't beat me to it. For now, I hope I've given you a place to start looking for a good image. emoticon

---
Runboard Knowledge Base
Website Creation Tutorials
5/22/2015, 3:45 am Link to post Email Lesigner Girl   PM Lesigner Girl Blog
 
OldWarrior Profile
Live feed
Blog
Friends
Miscellaneous info

Jack of All Trades,
Master of Some

Global user (premium)

Registered: 04-2006
Location: USA, Western hemisphere, earth
Posts: 179
Karma: 18 (+18/-0)
Reply | Quote
Re: Anyone Have Some Fresh Ideas for Board Design?


Thanks, LG.

I have implemented all of my changes so far. I really like how things are shaping up.

---
Old Warrior

Check out Bible Notes
It is one of my favorite places on the Internet.
God bless you, everyone!
5/22/2015, 3:47 am Link to post Email OldWarrior   PM OldWarrior Blog
 


Add a reply

Page:  1  2  3  4  5 ... 8  9  10 



You are not logged in (login)