My casual, random and whatnot design doubts

Hi! So...i am designing 2 forums now..and i would get lots of one-liner doubts..
Since this is fmdesign, i came here to seek some small helps that i need. Any help would be highly appreciated ^^
I didnt want to open tones of topics in support forum, so..yeah
Please move the thread to appropriate section if it isnt. (I deeply apologize to just create a topic :/ )

1. How can i style the "+" & "-" vote buttons to be green n red? I tried dev tools but didnt find their class..
2. How can i add an icon BEFORE and AFTER too in "who is online" , "statistics" etc (all h3)..i only know about adding 1 image.
3. How to style footer like in support forum? (Image n all)
4. Visit http://freetest.forumotion.net ..take a look at any topic.. im using dark skin by matti, and there's a big gap between post profile and post area..how do i get rid of it

Thats it for now..ill keep posting here until im done. Thanks so much if someone helps ^^

For the vote links, you could use their href attribute to select them :

Code:

.vote a[href*="plus"] { color:green }

.vote a[href*="minus"] { color:red }

To add an image before and after an element with CSS you can use the pseudo selectors ::before and ::after :

Code:

.h3:before, .h3:after { content:url('http://2img.net/i/fa/subsilver/topic_delete.gif') }

You can place an image at the foot of the page by using a background image on the wrapper :

Code:

#wrap {
    background-image:url('http://i56.servimg.com/u/f56/18/21/60/73/bgwrap10.png');
    background-repeat:repeat-x;
    background-position:bottom;
}

To get rid of that gap you can increase the width of the postbody or postprofile. I'll provide the postbody :

Code:

.postbody { width:80% }

ULTIMATE !! works perfectly ~

got another problem now though :
http://freetest.forumotion.net/t1-your-first-subject

some posts have different bg color randomly , why?

umm any way to make these icons a bit lower?


EDIT: aand this

The posts alternate between the two classes : row1 and row2

The color is inherited from your choice in the colors...I think it was background color1 and background color2 ? Just to make it easy, I usually color the posts with the following :

Code:

.post { background:#111; }

You should be able to edit the vertical alignment of the images with the vertical-align property.

Code:

.h3:after, .h3:before {
    content: url('http://icons.iconarchive.com/icons/yusuke-kamiyamane/fugue/16/shuriken-icon.png');
    vertical-align:-2px;
}

You can use pixels, or percentage.

worked! but the post color didn't :/
this
this
this
have color #0F0F0F
rest have #222222 ..
and the post profile n post body sync ?

thanks a lot!

Hmm.. try adding important :

Code:

.post { background:red !important; }

The postprofile and postbody are floating elements, so getting their height to sync up using percentages wouldn't work. If you look at phpbb3, the postprofile comes after the postbody and setting its width to 100% will place it where it actually is in the DOM, or I think it was removing their floats.

that worked thanks !

and i guess I have to make it transparent hmm.. thanks , will do! if I have questions i'll ask

You're welcome, and best of luck !

hi again ~

http://freetest.forumotion.net/

How do I move the whole main content to the left a bit, so there is more space on right area? I tried with 'left: 100px;' but it had no effect   

https://i.servimg.com/u/f55/16/05/88/52/untitl38.png

How can I make footer links in 2 lines?
Thanks  

You can relatively position to wrap so you can move it. Then add 100 pixels to the right of it :

Code:

#wrap { position:relative; right:100px; }

You could also float the wrap to the left :

Code:

#wrap { float:left; }

I think the second row is additional footer links added by :
Administration panel > Modules > Footer links > configuration

Then add the new footer links.

For the default links, you could probably reduce the width so the links will go to the next line.

Code:

#page-footer .navbar li.rightside { width:400px; }

Worked great!
thanks a lot!!
I'll post if I need anything.. Only a bit is left,.

Okay, you're welcome.

freetest.forumotion.net

Im done with the basic layout? Any comments (not a review lol)..?
I have currently put the same forumotion logo in footer..will replace the image later
I simple question, how is Forum 1's icon is different than others?

Forum one has subforums which is why it has that icon.

It is looking good so far. You should maybe increase the height or padding on the login boxes so the icons show better.

Maybe something like this :

Code:

input.post { padding-top:3px; padding-bottom:3px; }

Alright will do that.. I have a bit more questions:

1. I added up an image right to footer links (just like support forum and infact the same image lol (temporarily)) .. but some people can view while mostly people cant see any image in footer  . What do to?

2. I got myself a verticle nav bar designed, and it has hover images separately, they are like symbols..
Home symbol - normal
a text "Home" slides from it - hover

That sliding thing..how can I get it to work? Since i only know how to put different images for normal and hover,  i dont know how can I animate that image sliding stuff

Link: http://freetest.forumotion.net
link to my original forum (the one with footer image problem) : http://onepiecea-edition.yoo7.com

Hi, sorry for late reply I totally forgot about this. I was going to answer the day you post, but I think I got lost doing something else.

For 1 :
It says I cannot load the image, maybe it is the server the image is hosted on ?
https://im1.all-up.com/i/img/act_bottom.png



For 2 :
Do you mean something like this ?

Code:

.navbar a.mainmenu { position:relative; }

.navbar a.mainmenu[href="/"]:after { content:"Home"; }
.navbar a.mainmenu[href="/faq"]:after { content:"FAQ"; }
.navbar a.mainmenu[href="/search"]:after { content:"Search"; }
.navbar a.mainmenu[href="/memberlist"]:after { content:"Memberlist"; }

.navbar a.mainmenu:after {
    color:white;
    text-shadow:none;
    position:absolute;
    left:0;
    top:-7px;
    filter:alpha(opacity=0);
           -khtml-opacity:0;
             -moz-opacity:0;
                  opacity:0;
    -webkit-transition:500ms;
       -moz-transition:500ms;
         -o-transition:500ms;
            transition:500ms;
}

.navbar a.mainmenu:hover:after {
    left:10px;
    filter:alpha(opacity=100);
             -khtml-opacity:1;
               -moz-opacity:1;
                    opacity:1;
}

For 1 : thanks :DI'll replace the image ^^

For 2 : umm I think that's not really something that I'm looking for.. my question is..like this:


This is normal "HOME" navbar


This is how its supposed to look when we hover over it (not looping ofcourse)..

Thanks a lot for all the help

EDIT: hmm, I tried that #i_icon... selectors but it doesn't work. how to put the hover ones? :/

EDIT 2 :
aLRIGHt, now I came up with this and I am using this :

Code:

#i_icon_mini_index {
  width: 133px; height: 52px; background: url(http://fc04.deviantart.net/fs70/f/2014/118/a/1/homenav_by_z_studios-d7gariy.gif) no-repeat 0 0;
}
#i_icon_mini_index:hover {
  background: url(http://fc06.deviantart.net/fs71/f/2014/118/a/d/homenavopen_by_z_studios-d7gariu.gif) no-repeat 0 0;
}
#i_icon_mini_portal {
  width: 133px; height: 52px;  background: url(http://fc08.deviantart.net/fs71/f/2014/118/a/2/portalnav_by_z_studios-d7garim.gif) no-repeat 0 0;
}
#i_icon_mini_portal:hover {
background: url(http://fc09.deviantart.net/fs70/f/2014/118/0/f/portalopen_by_z_studios-d7garil.gif) no-repeat 0 0px;
}
#i_icon_mini_faq {
  width: 133px; height: 52px;  background: url(http://fc05.deviantart.net/fs71/f/2014/118/6/2/faq_by_z_studios-d7garj4.gif) no-repeat 0 0;
}
#i_icon_mini_faq:hover {
background: url(http://fc09.deviantart.net/fs71/f/2014/118/c/1/faqopen_by_z_studios-d7garj0.gif) no-repeat 0 0px;
}
#i_icon_mini_search {
  width: 133px; height: 52px;  background: url(http://fc05.deviantart.net/fs70/f/2014/118/6/8/searchnav_by_z_studios-d7garid.gif) no-repeat 0 0;
}
#i_icon_mini_search:hover {
background: url(http://fc05.deviantart.net/fs70/f/2014/118/2/b/searchopen_by_z_studios-d7gari9.gif) no-repeat 0 0px;
}
#i_icon_mini_members {
  width: 133px; height: 52px;  background: url(http://fc02.deviantart.net/fs70/f/2014/118/a/c/membersnav_by_z_studios-d7garit.gif) no-repeat 0 0;
}
#i_icon_mini_members:hover {
background: url(http://fc05.deviantart.net/fs70/f/2014/118/9/4/membersopen_by_z_studios-d7garis.gif) no-repeat 0 0px;
}
#i_icon_mini_profile {
  width: 133px; height: 52px;  background: url(http://fc00.deviantart.net/fs70/f/2014/118/9/8/profilenav_by_z_studios-d7garii.gif) no-repeat 0 0;
}
#i_icon_mini_profile:hover {
background: url(http://fc01.deviantart.net/fs70/f/2014/118/4/4/profileopen_by_z_studios-d7garih.gif) no-repeat 0 0px;
}
#i_icon_mini_message {
  width: 133px; height: 52px;  background: url(http://fc02.deviantart.net/fs70/f/2014/118/5/3/dennav_by_z_studios-d7garj6.gif) no-repeat 0 0;
}
#i_icon_mini_message:hover {
background: url(http://fc00.deviantart.net/fs70/f/2014/118/2/2/messagesopen_by_z_studios-d7gario.gif) no-repeat 0 0px;
}
#i_icon_mini_new_message {
  width: 133px; height: 52px;  background: url(http://fc04.deviantart.net/fs70/f/2014/118/b/f/ringmushi_by_z_studios-d7garig.gif) no-repeat 0 0;
}
#i_icon_mini_new_message:hover {
background: url(http://fc01.deviantart.net/fs71/f/2014/118/1/d/messagesopen1_by_z_studios-d7garin.gif) no-repeat 0 0px;
}
#i_icon_mini_logout {
  width: 133px; height: 52px;  background: url(http://fc02.deviantart.net/fs71/f/2014/118/a/0/logout_by_z_studios-d7gat99.gif) no-repeat 0 0;
}
#i_icon_mini_logout:hover {
background: url(http://fc06.deviantart.net/fs70/f/2014/118/e/b/logoutmove_by_z_studios-d7gat94.gif) no-repeat 0 0px;
} 
#i_icon_mini_login {
  width: 133px; height: 52px;  background: url(http://fc00.deviantart.net/fs71/f/2014/118/e/b/login_by_z_studios-d7gat9c.gif) no-repeat 0 0;
}
#i_icon_mini_login:hover {
background: url(http://fc02.deviantart.net/fs70/f/2014/118/e/f/loginmove_by_z_studios-d7gat9a.gif) no-repeat 0 0px;
}

The problems :

- Every button got a white outline around them, but when I place these via "Pics management", there's no white background :/
- Upon hovering once, its good, but I want the .gif to play EVERYTIME we hover on it.. currently its like we hover over say HOME, so it would slide, but next time it won't, until I refresh the page.

The gif has no loop correct ? If so it will play once, then cache the image and that's it, it wont play again until the cache is cleared. The white outline is most likely from the gif file, if you don't add an alpha filter(turn the white transparent on save) then you'll get a solid background.

For Fw I click options before saving my gif, then edit the colors.


1. Click the color you want to modify
2. Click the transparency button to make the color transparent


I was thinking you could probably have the icon, but you have the thingies that pop out separate as a background image. You'll move the background position on hover, y'know like I do with the navbar, or rows ? Yep, that's a background image.

The text in icon has white too, also when I put the icons casually through pics management then there's no while outline :/
Is there any way to get rid of em via css maybe?..

About the text sliding as separate, I love the idea! If I manage to get the sliding text icon separately then can you make it slide to and fro upon hover and stuff by writing that css?
Its honestly getting quite confusing for me so can you do a step by step of what i need to do?

I was playing around, you could probably do something like this :

Code:

#page-header .navbar { width:115px; }

.navbar a.mainmenu {
    display:block;
    text-align:right;
    transition:300ms;
    border-radius:0 100% 100% 0;
}

.navbar a.mainmenu[href="/forum"] { background:url('http://i56.servimg.com/u/f56/18/21/60/73/112.png') no-repeat 120px 50%; }


.navbar a.mainmenu:hover { background-position:0px 50%; }

Render your icon, then place it in pics management. Then setup CSS for the effects. Have to use border-radius to clip the edges so you don't see the bg image moving behind, still needs tweaking.

Demo : http://generaltesting.forumotion.com/forum

it looks just how I want in your test forum (lol nice topics there XD), but when I placed that code in my forum while hiding the previous #i_icon ones, it did nothing

http://freetest.forumotion.net

Ooh ooh ! In my test I use portal as the homepage and you use the forum. Sooo change the href attribute :

Code:

[href="/forum"]

Humm..the homepage is usually href="/" so a slash should do-- if you haven't yet.   

Oh right damn why don't I think of it?
so yeah the basic idea is working pretty great now.. so that's a great news!

however, sometimes the text kinda 'fluctuates' upon hover, like a fast vibration motion left n right n left n right..... I can live with it though

Second, the buttons are overlapping each other as you can see in my Test Forum ..
removing "display: block" gets rid of it, but I haven't removed it since you added it and it must be of some use

I'll go by what you say so..

Now there's another thing
NORMAL

HOVER


(animation in hover is a non looping one), so my question is if I make it a normal LOOPING gif, it would work good right?

In your CSS is this rule :

Code:

.navbar a.mainmenu {
    background: none repeat scroll 0% 0% transparent;
    border-radius: 5px;
    display: block;
    font-size: 11px;
    font-weight: 700;
    margin: -10px 0px;
    position: relative;
    text-align: right;
    text-shadow: 1px 1px 2px #000;
    top: 10px;
    transition: all 300ms ease 0s;
}

Remove margin:-10px 0px; and all should be well.

It is subtracting 10px from the top and bottom.

I'm not sure about the looping, It will probably play over and over.

okay cool! that's done now..
SUPER THANKS..
how can I make the text button slide a bit more to left? I tweaked the options but they were very confusing to me and didn't do anything ?_?

EEDIT: I managed to make the text button to slide more, but its being cut off after a certain limit, how to make it limitless? And how to make the sliding icon start of from a bit more towards left?

EDIT 2 : how do I select the "NEW MESSAGES" ??

Code:

.navbar a.mainmenu[href="/privmsg?folder=inbox"] {}

this is for no new messages..
what should be for new messages? :/

http://freetest.forumotion.net/


Please answer me T.T