|
[ C ] Another cool thing.
|
|
Topic Started: Jan 19 2015, 06:25 AM (2,647 Views)
|
|
beastboybrown
|
Jan 19 2015, 06:25 AM
Post #1
|
- Posts:
- 126
- Group:
- Members
- Member
- #209,625
- Joined:
- August 18, 2012
|
Hey I love the way the banner stuff and all is but from the way the forum is set up people sometimes get lost on major topics like the saga. Now I was scolling through sites to advertise on (Dont judge me) and well 1 cought my eye more then ever. It was a proboards site. Now in my day I have advertised on many many sites. This one was special. Seeing the site is another site like mine in a competitive RP field I wont place it here it unless needed.
If I could get a coding I would like it to be similar to this.
Ill show an image.
Spoiler: click to toggle
In the first image here it shows a cruddy banner with a click me symbol. (The banner is not what impressed me)
When you click on it then it shows stuff from the "Important updates" "Saga Description" "Welcome" to other fan bases. "Links" to important places "Staff members"
Only real problem I see is that my forums banner is smaller then theres but I can work threw the problem.
As for what I want to do. For the coding when you click on it then it shows stuff from the "Important updates" I will place stuff like Sagas and Mini-sagas. New rule passings/ Updates and generally what I am doing.
"Saga Description" Will describe whats going on in the saga in general so more can actually focus on that.
"Welcome" Will describe our forum and everything generally about it.
"Links" Will lead anywhere I need basically.
"Staff members" I would like for it to show a list of staff members. Pictures arent needed. I would just like a list with names that do something like this: beastboybrown and other members. If the names are to long for it. I will use nicknames. Like I am called BB a LOT.... or B3.. beast... and even Brown. I have to many nicknames.
Either way let me know what you can do
|
|
|
| |
|
Viral
|
Jan 19 2015, 06:26 PM
Post #2
|
- Posts:
- 2,701
- Group:
- Members
- Member
- #109,703
- Joined:
- September 25, 2005
- Latest Design
- http://viralsmods.com
|
It'd be a lot easier to understand what's going on with a live example.
|
|
|
| |
|
beastboybrown
|
Jan 19 2015, 06:50 PM
Post #3
|
- Posts:
- 126
- Group:
- Members
- Member
- #209,625
- Joined:
- August 18, 2012
|
kk
Spoiler: click to toggle
|
|
|
| |
|
Cory
|
Jan 19 2015, 11:15 PM
Post #4
|
- Posts:
- 16,587
- Group:
- Members
- Member
- #44,593
- Joined:
- February 12, 2005
|
Do you like this effect?
http://w11.zetaboards.com/Gollum/index/
|
|
|
| |
|
beastboybrown
|
Jan 20 2015, 06:20 AM
Post #5
|
- Posts:
- 126
- Group:
- Members
- Member
- #209,625
- Joined:
- August 18, 2012
|
Yeah I dont mind if it comes down or whatevers. But I need the sections for different things. Having 1 list aint gonna help much :3
Plus could you by chance also make sure the banner would stay centered? If thats to much a burden let me know. I can imagen how hard to makeing these codes are. Especially when trying to imagen how to get it set up.
Spoiler: click to toggle
Heres a general picture of how I would like it. (Other then the terrible text I placed that says "The Rules" XD. I made it at 5 AM. I know its not perfect . Instead of saying rules could you place "Just Starting Links" I could place general stuff in there like character sheet and such.)
Talking about that I really appreciate you doing this for me. If you ever want a Avis (Like one of the pixel guys in the banner). Or something I could help you with let me know Cause I really appreciate you doing this for me. ^-^
PS: Are you enjoying the visual I make with the images? Do they help at all? :3
|
|
|
| |
|
Cory
|
Jan 20 2015, 08:50 PM
Post #6
|
- Posts:
- 16,587
- Group:
- Members
- Member
- #44,593
- Joined:
- February 12, 2005
|
How's that? Recheck the link I provided above. You can edit in the content as you desire.
You'll have to provide me with a link so I could troubleshoot the error if the banner isn't being centered like it should be.
Yes, the visuals are always helpful to coders so we can see exactly what you are wanting.
|
|
|
| |
|
beastboybrown
|
Jan 20 2015, 09:35 PM
Post #7
|
- Posts:
- 126
- Group:
- Members
- Member
- #209,625
- Joined:
- August 18, 2012
|
It looks decent but Tital 5 and 6 blocks are past the bar that say "Search Members Calendar FAQ Portal". Heres a picture
Spoiler: click to toggle
http://w11.zetaboards.com/DBZ_RPG/index/
Good Im being helpful
|
|
|
| |
|
Cory
|
Jan 20 2015, 09:46 PM
Post #8
|
- Posts:
- 16,587
- Group:
- Members
- Member
- #44,593
- Joined:
- February 12, 2005
|
That's odd, here's how it appears for me: http://i.imgur.com/63sKS75.png
What web browser are you using?
I guess I could just use a table instead of a bunch of inline-block DIV's.
|
|
|
| |
|
beastboybrown
|
Jan 21 2015, 09:13 PM
Post #9
|
- Posts:
- 126
- Group:
- Members
- Member
- #209,625
- Joined:
- August 18, 2012
|
Still the same to me with whatever its doing. I am using Firefox. Nothing special.
But man whatever looks decent and works best Im easy.
|
|
|
| |
|
beastboybrown
|
Jan 25 2015, 09:21 PM
Post #10
|
- Posts:
- 126
- Group:
- Members
- Member
- #209,625
- Joined:
- August 18, 2012
|
http://adoxographyv2.boards.net/thread/1255/whispered-secret
Heres where there code for the banner is.
Here below is the only parts of the codes that say "banner" in them.
- Code:
-
/* IE7 */ .ie7 * { word-wrap: normal; } .ie7 .shoutbox .shoutbox-post * { word-wrap: break-word; } .ie7 .show-user .status-input input { width: 95%; margin-top: 0px; } .ie7 .show-user .status-submit { width: 130px; text-align: right; } .ie7 .show-user .edit-controls { text-align: right; padding-right: 10px; } .ie7 .show-user .edit-controls .icon { text-align: center; } .ie7 .search .options-container { height: 250px; } .ie7 .calendar .cal-box { border-collapse: collapse; } .ie7 .ui-pagination { float: left; } .ie7 .recipients .user-search-selection .ui-selectlist-item .close { right: 0px; } .ie7 .user-search-selection .ui-selectlist-item .close { right: -8px; } .ie7 .micro-profile { zoom: 1; *display: inline; width: 188px; margin: 0px 0px 3px 0px; padding-right: 9px; text-align: left; } .ie7 .container.copy table.list { border-collapse: separate; } .ie7 .ui-search .search-input { margin-top: -1px; } .ie7 .threads .main table, .ie7 .conversations .main table { table-layout: auto; } .ie7 table.list .checkbox { padding-left: 1px; } .ie7 .avatar-wrapper span { display: inline-block; height: 100%; } .ie7 .cal-preview-panel .cal-box .head { padding: 2px 0px 2px 4px; } .ie7 input[type="text"] { padding-top: 5px; vertical-align: middle; } .ie7 select { vertical-align: middle; } .ie7 input[type=text].search-input { width: auto; padding: 4px 2px 0px 2px; } .ie7 .search #what input, .ie7 .search #where input, .ie7 .search #who input, .ie7 .search #who select { width: 210px; } .ie7 .legend table { table-layout: auto; } .ie7 .edit-user .options.content-box input[type="submit"] { left: auto; } /* I'm aware that this line is ridiculous. It removes the extra black border around submit buttons, by making black transparent and setting the color to off-black */ .ie7 input[type="submit"], .ie7 input[type="button"], .ie7 button { padding: 1px 6px 3px 6px; height: 26px; color: lighten(@buttons_text_color, 1%); background-color: lighten(@buttons_background_color, 1%); filter:chroma(color=@color_9); overflow: visible; } .ie7 .container > .control-bar { margin-bottom: 0px; } .ie7 a.likes-button, .ie7 .messages .quote-button { margin-right: 3px; min-height: 23px; } .ie7 .user-search-box input[type=text].search-input, .ie7 .filter input[type="text"].search-input { width: 112px; } .ie7 .recent-threads-button { padding-right: 2px; } .ie7 .subject_line .controls { margin-top: 1px; } .ie7 .ui-poll .results td.answer { width: 175px; } .ie7 .shoutbox_messages .shoutbox-post.content-box { padding-right: 16px; } .ie7 footer ul { width: 530px; } .ie7 .options_menu li.ui-menu-has-sub-menu > .arrow { display: inline; } .ie7 .options_menu li { width: 190px; position: static; } .ie7 .options_menu li .arrow { margin-top: -22px; top: auto; } .ie7 .options_menu hr { display: none; } .ie7 .quick-reply textarea { width: 99%; } .ie7 .ui-poll table { table-layout: auto; } .ie7 .ui-poll .results .stats { float: none; } .ie7 .users { width: 100%; } .ie7 .users .ui-pagination { margin: 0 auto; display: inline; float: none; } .ie7 .name_and_group.float-right { float: none; } .ie7 .shoutbox_form ul.tools li img { border: 1px solid transparent; } .ie7 .shoutbox_form textarea { word-wrap: break-word; } .ie7 #banner { padding: 0px 0px; } .ie7 a#logo { padding: 0px 20px; line-height: 100px !important; } .ie7 div.post-options { display: inline !important; } .ie7 .ui-menu li { background-image: none; } .ie7 .ui-menu li:hover > a { background-image: none; } .ie7 .attachment-button-text { padding: 0 5px 3px 5px; } .ie7 .wysiwyg-area .edit_reason > div { height: 28px; margin-left: 0; margin-right: 8px; } .ie7 .wysiwyg-area .submit { line-height: 1px !important; } .ie7 .show-user .controls { margin-right: 10px; } .ie7 #nav-tree > li { display: inline; } .ie7 #navigation-tree, .ie7 #nav-tree, .ie7 #nav-tree > li { height: 21px; } .ie7 .recent-threads-button { height: 15px; } .ie7 #nav-tree .menu_arrow { top: -1px; border-width: 11px 1px 11px 11px; } .ie7 #password-wrapper div { display: inline; } .ie7 #password-wrapper div input[name="password"] { position: relative; top: 5px; } .ie7 #banner { min-height: @banner_height; height: auto; } .ie7 #nav-tree { position: relative; overflow: hidden; } .ie7 .show-user table .center-col:first-child table { table-layout: auto; } .ie7 .popup_html .ui-menu { position: relative; z-index: 99999999; } .ie7 #navigation-menu > ul li a { min-width: 21px; } .ie7 #welcome { min-width: 200px; } .ie7 .avatar_size_default { font-size: 120px; } .ie7 .avatar_size_medium { font-size: 60px; } .ie7 .avatar_size_small { font-size: 40px; } .ie7 .avatar_size_quote { font-size: 24px; }
/* IE8 */ .ie8 select {padding-top: 2px; padding-bottom: 2px; } .ie8 .user-search-selection .ui-selectlist-item .close { right: 0px; } .ie8 .container.copy table.list { border-collapse: separate; } .ie8 .boards .threads { padding-left: 8px; padding-right: 8px; } .ie8 .options_menu { max-width: 190px; } .ie8 input[type="text"] { line-height: 20px; } .ie8 .recent-threads-button { line-height: 1.4em; } .ie8 .shoutbox_messages .shoutbox-post.content-box { padding-right: 16px; } .ie8 .user-search .user-search-box .user-search-input { width: 135px; } .ie8 table.list td.icon, .ie8 table.list th.icon { width: 54px; } .ie8 #nav-tree { display: inline-block; } .ie8 #content #navigation-tree, .ie8 #nav-tree, .ie8 #nav-tree > li { height: 21px; } .ie8 #content .recent-threads-button { height: 15px; } .ie8 #nav-tree .menu_arrow { top: -1px; border-width: 11px 1px 11px 11px; } .ie8 #nav-tree > li { padding-right: 1px; } .ie8 .popup_html ul { max-width: 550px; } .ie8 input[type="submit"], input[type="button"], button { min-height: 20px; }
/* IE9 */ .ie9 .avatar-wrapper > div > div { display: inherit; } .ie9 .user-search-selection .ui-selectlist-item .close { right: 1px; } .ie9 #nav-tree { display: inline-block; }
/* Firefox */ @-moz-document url-prefix() { select { padding: 4px 2px; } .ui-search .search-filters-button { padding-left: 6px; } .ui-tabMenu ul li { height: 27px; } }
/* Screen-only (tablets, phones) */ @media only handheld { textarea { font-size: 2em; } }
/* Custom Header */ @title_triangle: @color_1; @title_subtitle_font: 20px Oswald; @title_subtitle_color: @color_3; @header_background: @transparent_3; @header_box_background: @color_8; @header_box_title_font: 18px Oswald; @header_box_title_color: @color_3; @header_box_title_transform: uppercase; @header_box_title_align: right; @header_box_title_border: @color_1; @header_box_content_background: @color_6; @header_box_content_color: @color_9; @header_box_content_scroll: @color_3; @header_box_content_thumb: @color_1; @header_box_update_color: @color_2; @header_box_links_background: @color_4; @header_box_links_color: @color_8; @header_box_links_hover_background: @color_1; @header_box_links_hover_color: @color_8; @header_accent_tri_color: @color_4; @header_toggle_color: @color_8; .tinytri { width:0px; border-style: solid; border-width: 20px; border-color: transparent transparent @title_triangle @title_triangle!important; display:inline-block; margin-bottom:-17px; margin-left:5px; } .tagline {font: @title_subtitle_font; text-transform:uppercase; color: @title_subtitle_color; display:inline; position:relative; top:16px; left:5px;} .bannerbox { width:1000px; height:400px; overflow:hidden; background-color:@banner_background_color; background-image:@banner_background_image; } .bannertoggle { position:relative; left:850px; width:1000px; height:400px; overflow:hidden; } .bannertri { width:0px; border-style: solid; border-width: 200px; border-color: transparent @header_background @header_background transparent !important; } .bannercontent { position:absolute; top:0px; width:600px; height:400px; background-color: @header_background; } .box { background-color: @header_box_background; position:absolute; padding:10px; } .box.one { width:195px; height:180px; top:20px; } .box.two { width:165px; height:140px; top:20px; left:225px; } .box.three { width:165px; height:170px; top:190px; left:225px; } .box.four { width:395px; height:130px; top:230px; left:-200px; } .box.five { width:140px; height:340px; top:20px; left:420px; } .bannercontent .box .header { font: @header_box_title_font; color: @header_box_title_color; text-transform: @header_box_title_transform; text-align: @header_box_title_align; border-bottom:3px double @header_box_title_border; } .bannercontent .boxcontent { background-color: @header_box_content_background; color: @header_box_content_color; padding:5px; font:11px Helvetica; text-align:justify; overflow:auto; } .boxcontent::-webkit-scrollbar, .quicklinks::-webkit-scrollbar { width: 7px;background-color: @header_box_content_scroll;} .boxcontent::-webkit-scrollbar-thumb, .quicklinks::-webkit-scrollbar-thumb { background-color: @header_box_content_thumb;} .boxcontent .date { font:14px Oswald; color: @header_box_update_color; } .quicklinks { height:315px; overflow:auto; } .quicklinks a { font:12px Open Sans; color: @header_box_links_color; text-transform:uppercase; background-color: @header_box_links_background; text-align:center; padding:5px 2px; margin:4px 0px; display:block; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .quicklinks a:hover { color: @header_box_links_hover_color; background-color: @header_box_links_hover_background; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .accenttri { width:0px; position:absolute; top:30px; left:-200px; border-style: solid; border-width: 95px; border-color: transparent @header_accent_tri_color @header_accent_tri_color transparent !important; } #clickme { cursor: pointer; font:18px Oswald; color: @header_toggle_color; text-transform:uppercase; position:absolute; bottom:5px; left:-385px; padding: 100px 40px 0px 40px; }
Header Coding from it.
- Code:
-
/* Custom Header */ @title_triangle: @color_1; @title_subtitle_font: 20px Oswald; @title_subtitle_color: @color_3; @header_background: @transparent_3; @header_box_background: @color_8; @header_box_title_font: 18px Oswald; @header_box_title_color: @color_3; @header_box_title_transform: uppercase; @header_box_title_align: right; @header_box_title_border: @color_1; @header_box_content_background: @color_6; @header_box_content_color: @color_9; @header_box_content_scroll: @color_3; @header_box_content_thumb: @color_1; @header_box_update_color: @color_2; @header_box_links_background: @color_4; @header_box_links_color: @color_8; @header_box_links_hover_background: @color_1; @header_box_links_hover_color: @color_8; @header_accent_tri_color: @color_4; @header_toggle_color: @color_8; .tinytri { width:0px; border-style: solid; border-width: 20px; border-color: transparent transparent @title_triangle @title_triangle!important; display:inline-block; margin-bottom:-17px; margin-left:5px; } .tagline {font: @title_subtitle_font; text-transform:uppercase; color: @title_subtitle_color; display:inline; position:relative; top:16px; left:5px;} .bannerbox { width:1000px; height:400px; overflow:hidden; background-color:@banner_background_color; background-image:@banner_background_image; } .bannertoggle { position:relative; left:850px; width:1000px; height:400px; overflow:hidden; } .bannertri { width:0px; border-style: solid; border-width: 200px; border-color: transparent @header_background @header_background transparent !important; } .bannercontent { position:absolute; top:0px; width:600px; height:400px; background-color: @header_background; } .box { background-color: @header_box_background; position:absolute; padding:10px; } .box.one { width:195px; height:180px; top:20px; } .box.two { width:165px; height:140px; top:20px; left:225px; } .box.three { width:165px; height:170px; top:190px; left:225px; } .box.four { width:395px; height:130px; top:230px; left:-200px; } .box.five { width:140px; height:340px; top:20px; left:420px; } .bannercontent .box .header { font: @header_box_title_font; color: @header_box_title_color; text-transform: @header_box_title_transform; text-align: @header_box_title_align; border-bottom:3px double @header_box_title_border; } .bannercontent .boxcontent { background-color: @header_box_content_background; color: @header_box_content_color; padding:5px; font:11px Helvetica; text-align:justify; overflow:auto; } .boxcontent::-webkit-scrollbar, .quicklinks::-webkit-scrollbar { width: 7px;background-color: @header_box_content_scroll;} .boxcontent::-webkit-scrollbar-thumb, .quicklinks::-webkit-scrollbar-thumb { background-color: @header_box_content_thumb;} .boxcontent .date { font:14px Oswald; color: @header_box_update_color; } .quicklinks { height:315px; overflow:auto; } .quicklinks a { font:12px Open Sans; color: @header_box_links_color; text-transform:uppercase; background-color: @header_box_links_background; text-align:center; padding:5px 2px; margin:4px 0px; display:block; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .quicklinks a:hover { color: @header_box_links_hover_color; background-color: @header_box_links_hover_background; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .accenttri { width:0px; position:absolute; top:30px; left:-200px; border-style: solid; border-width: 95px; border-color: transparent @header_accent_tri_color @header_accent_tri_color transparent !important; } #clickme { cursor: pointer; font:18px Oswald; color: @header_toggle_color; text-transform:uppercase; position:absolute; bottom:5px; left:-385px; padding: 100px 40px 0px 40px; }
- Code:
-
/* Thread List */ @threads_header_background: @color_2; @threads_header_color: @color_8; @threads_border: @color_5; @threads_sticky_color: @color_2; .threadlist th, #recent-threads th { background-color:@threads_header_background; padding:5px!important; color: @threads_header_color; font:10px Helvetica; text-transform:uppercase;} .threads .item.announcement.last > td { border-bottom:10px solid @threads_border!important;} tr.sticky + tr:not(.sticky) > td { border-top:5px solid @threads_border!important;} .threads .item.announcement .main .link a {color: @lists_links_color; font-weight: bold; } .threads .item.announcement.last > td .main .link a { color: @lists_links_color; font-weight: bold; } .threads .item:hover.announcement .main .link a { font-weight: bold; } .threads .item:hover.announcement.last > td .main .link a { font-weight: bold; } .threads .item.sticky .main .link a { color: @threads_sticky_color; font-weight: bold; } .threads .item:hover.sticky .main .link a { font-weight: bold; } .threads .created-by a { font:11px Oswald; } .threads .created-by-user, .threads .created-by-user a { font:11px Oswald; }
http://adoxographyv2.boards.net/thread/841/carousel-slideshow-effect
More on it
|
|
|
| |
|
beastboybrown
|
Jan 28 2015, 08:15 PM
Post #11
|
- Posts:
- 126
- Group:
- Members
- Member
- #209,625
- Joined:
- August 18, 2012
|
Bump
|
|
|
| |
|
Cory
|
Jan 30 2015, 09:37 PM
Post #12
|
- Posts:
- 16,587
- Group:
- Members
- Member
- #44,593
- Joined:
- February 12, 2005
|
Is the main reason you're showing me that coding is because you prefer a slide over effect instead of a slide down effect? If so, I can probably find a jQuery plugin to produce that effect that won't require as much coding.
|
|
|
| |
|
beastboybrown
|
Jan 31 2015, 12:31 AM
Post #13
|
- Posts:
- 126
- Group:
- Members
- Member
- #209,625
- Joined:
- August 18, 2012
|
No I am just trying to help :3 I like the slide one more yes. But I just wanna help overall
Can you make it so the boxes get a scroll bar each
|
|
|
| |
|
beastboybrown
|
Feb 5 2015, 09:01 PM
Post #14
|
- Posts:
- 126
- Group:
- Members
- Member
- #209,625
- Joined:
- August 18, 2012
|
Should I bump this? Its been 6 days O.O I aint the brightest in how you do stuff on this site ^-^ Im use to my site where I PM people. But Kankuro said to me earlier doing that would piss people off. And that's the last thing I want to do So Imma say Bump but leave that there as well :3
|
|
|
| |
|
Kankuro
|
Feb 5 2015, 09:30 PM
Post #15
|
- Posts:
- 1,092
- Group:
- Members
- Member
- #608,916
- Joined:
- May 25, 2013
- I'm Browsing With
- Chrome
- My Board URL
- http://gamesandanime.net/index/
- Latest Design
- http://if.invisionfree.com/topic/5195959/
|
- beastboybrown
- Feb 5 2015, 09:01 PM
Should I bump this? Its been 6 days O.O I aint the brightest in how you do stuff on this site ^-^ Im use to my site where I PM people. But Kankuro said to me earlier doing that would piss people off. And that's the last thing I want to do  So Imma say Bump but leave that there as well :3 When did I say that? If you were complaining about others not helping you instantly then that's probably why. Bumping is fine, but getting mad when people who help for free don't help you as quickly as you want isn't respectful.
|
|
|
| |
| 1 user reading this topic (1 Guest and 0 Anonymous)
|