Search the Community
Showing results for tags 'Coding'.
-
I'm not sure if I'm posting this in the right forum on here but here we go! The title may or may not be well explained or not but i will go into further details. What I would like is for people to use the hashtag system that is built into JCINK [#][/#] to tag their open threads and then for that to post automatically to our discord server on an openthreads channel so that people can see when they've been posted. I was wondering if anyone knew how to do this? I have tried to google but to no avail (might be me not looking for the right search terms) If anyone knows anything it is much appreciated!
-
So while I understand HTML and CSS, I am woefully useless when it comes to PHP other than "damn, I wish I understood that so I could do this thing". So this is probably the first of many questions. I'm trying to change the main forum list on a myBB site so it's not just a single list, basically. I can add images, change colors, etc. etc. What I can't do is figure out how to re-write the HTML so it pulls in the correct forums (I can try to hard code it and then crazy things happen). I'm sure I'm explaining this poorly, so attached is a screenshot of what I would ideally like for it to look like. If that is a complete bear, I would settle for at least being able to have two forums side by side (i.e. like The Commons section in the attached screenshot). If there's a tutorial on this somewhere, please feel free to point my blind self in that direction. I just wasn't able to find anything.
-
I'm adding the discord widget to my site & I was wondering how to get it to show the most recent messages in the channel I've chosen to display rather than just the online users? I've seen this on sites while advertising as a guest, so it wasn't anything to do with being logged into the channel or anything. Thank you! Edit: Meant to post this in the coding help forum.
-
Alright guys, this is the skin I'm working on at the moment. See those hideous blue links to the right. I hate them. I don't know what to do to them. And now I am thinking about it far too much and I just can't get my brain around another option. Does anyone have any advice or ideas on what I could do to them? Should I change their location completely? Should I do something similar to what I have done for the replies and topics bit? Should I just say eff-this and make them lime green. (My brain feels like this is the most viable of my ideas so far! XD #bada55 )
-
Select any of the skins that you think should be updated to Jcink! Most of them are ancient... but I'm interested to see if the styles would hold up in this "new and trendier" world of RP. XD
-
I'm using rpg initiative's hosting. I just want to find out how to install a plugin that has been downloaded?
-
Hello everyone! I'm trying to find a way to make signatures visible. I'm not sure what that takes, if it's a matter of ticking a box or something more complicated... but either way I would appreciate any advice! Site: http://xmenacademy.jcink.net/index.php?act=portal
-
When I post a reply from my QuickReply box, the miniprofile looks like this: When I reload the page, however, it goes back to normal (N.B.: the following image is how the miniprofile is supposed to look): It only happens if I post from an account and using QuickReply. If I write a "full" reply it gives no issue, and guests don't have problems either. I have no idea what's wrong and I'd love if anyone could help. Just in case you want to Inspect around a bit, here's a link to my site: https://unmasqued.rpginitiative.com/index.php Thanks!
-
How do? Yes. Me. Again. 😔 I am rewriting the poster section of the display.template to create nicer looking mini profiles. I want to display certain custom fields, not as a block the way the code currently does. I want some of them above the avatar, some below, etc. And I cannot, for the life of me, figure out the PHP bits to make this happen. I know the names for my custom fields, I know where I want to put them. I just cannot figure how to get the value of specific fields to display. Anyone feel like pointing me in the right direction? p.s. I appreciate you all so much smart people thanks so much
-
My site has a navigation bar that scrolls with the page, then it becomes fixed (like the one at the Initiative). It works almost always, however sometimes when the page has not enough length, the nav bar starts shaking up and down - not sure how else to decribe it. I tried with different heights and positioning, but it still does that. Also it does not happen all the time. Sometimes you re-open the same page (typically an empty forum, for instance) and everything is fine - it just scrolls as long as it can and then gets stuck there, with a bit of header still showing (which is fine). Any idea what the issue could be?
-
WHO POSTED TODAY? a block for IPS forums, by Mousie Why "who posted"? You might opt to use a "who posted" block over "who was online" for one of two main reasons: You use a Linked Accounts mod that does not record users as being online even if they have posted. You want your guests to see not just who visited the site, but who actively participated. What qualifies as a "post"? This block makes use of the "member_last_post" column attached to the member row. This generates a new date stamp any time the user posts content on the forum. This includes: New posts New topics New status updates New replies to status updates New blogs New comments to blogs New database records New comments to database records So in effect, any contribution the member makes to the forum is counted as Activity. How do I install this block? You'll find the full code at the end of this post. In your ACP: Go to Pages --> Blocks Create New Block Select "type" as "Custom" Select "content editor" as "Manual PHP" Under "Details", give your block a name, description, and a template key. Under "Content", copy and paste the code at the end of this post. How do I display this block? This block is mainly designed to sit at the bottom of your forum, similar to how Who Was Online? does. You can display the block by: Opening the Page Builder menu using the > icon on the left side of your screen, and selecting the block to drag and drop where you would like it displayed. If you defined a template key, you can add the block by editing the page template and placing the "{block="my_block_key"}" in your HTML templates where you would like the block to display. If you can use Page Builder to get the block where you want it, that is usually the simplest method. How does it work? This block doesn't use data from any custom databases, so it should work for most IPS forums. You should be able to copy and paste it into a new block, place it on your forum, and it will work. However, when I began coding blocks I found it difficult to find examples of simple blocks that I could understand, and use to modify and build my own blocks. For that reason, I've broken down the code below to explain what each function does, and how it manipulates the data to get the desired result. 1. Establishing the time difference $rightnow = time(); $timevar = $rightnow - 86400; In the first line, we use the time() function to generate a unix timestamp - a number that is essentially a count of how many seconds have passed since 1/1/1970. As the function is undefined (there is no additional information between the parenthesis), it defaults to current time. It also says that whenever we use the variable $rightnow, that it is to use the datestamp created by the time function in that first line. In the second line, we instruct the system to subtract 86400 seconds from $rightnow, and call that number $timevar. Basically, we're asking the system to work out what the time is now, and take 24 hours off it. You can adjust that "86400" to whatever number you like, depending on what range you would like displayed on your block. Want posts from the past week? Subtract 604800 instead. 2. Accessing the member database // Get the select object $select = (\IPS\Db::i()->select('member_id, prefix, suffix, g_id, name, members_seo_name, member_group_id, member_last_post', 'core_members' )); Here we define a new variable, $select, that we will use to contain information from the member database. The important parts here are:\ $select - This is the variable that will store all of the information found by the select query below. (\IPS\Db::i() - This function, unique to IPS systems, tells the system that we're going to access information from the database. It's a nifty shortcut. ->select - This tells the system that we're going to choose some information from a particular database and store it in the $select variable we defined at the start of the line. In the parenthesis, we have the conditions of the select. The format is: ('{columns to select}', '{database}') There are other conditions that you can add to manipulate and refine your data, but this simple example only defines the columns and database. You can also use * as a wildcard to select all information from a particular database, eg select('*', 'core_members') will return all columns of information from the core_members table. 3. Join on group data $select = $select->join( 'core_groups', 'core_members.member_group_id=core_groups.g_id', 'LEFT'); This line is important if you want to style the output using the group colours you've defined in your system. Which you probably do, because it looks nifty. How this works, is it looks at both the core_members table, and the core_groups table (where all information about the groups is stored, including styling) and asks it to find where the member_group_id (from core_members) is the same as g_id (from core_groups). Then, in any row in core_members where those fields are the same, it adds columns to the row and populates them with the relevant data from core_groups. Sounds complicated, but you can see how it works in a plain SQL example. Important parts of this function are: $select - This is the same variable we used above. $select-->join - This says that we're going to take the data from the $select variable we created, and join more data on. Basically, we're updating the information contained in $select, and still calling that updated variable $select. In the parenthesis, again we have a set of conditions that will tell the system what data to find and how to join it. The format is ('{second_database}', '{first_database_column}={second_database_column}') 4. Begin the print print "<div class='ipsWidget ipsWidget_horizontal ipsBox'><h3 class='ipsType_reset ipsWidget_title'>Who Posted Today</h3><div style='padding: 10px;'>"; Here we start to build the HTML that will contain the information. The function "print" is an output function, it tells the system that what comes next is a visual output element. In PHP, you can use HTML code by encasing it in double quotation marks, as in the example above. To print the results of PHP variables, they must be placed outside of the quotation marks. You'll see more of that below. 5. Start analysing the data foreach( $select as $students ) { if ($students['member_last_post'] > $timevar) Here, we ask the system to look through each row in $select and compare it to a particular condition. foreach - This tells the system that we're not looking at $select as a whole, but each individual row contained within it ($select is essentially a table in itself, created by the data you have chosen). $select as $students - This tells the system that each $select row is now going to be called $students, allowing it to differentiate between $select the big group of data, and $students the row of data contained within. if - This tells the system that we're only going to proceed for rows that meet the conditions defined in the parenthesis. ($students['member_last_post'] > $timevar) - This is our condition. What it says is that any $students row where the column member_last_post (you'll remember this is the column that keeps the latest post datestamp) contains a higher value than $timevar (the variable defined at the beginning of the block) are going to be used in the next processes. $students rows that do not have a datestamp higher than $timevar (thus, did not post in the last 24 hours) will be skipped over. 6. Create a running count { $count = $count + 1; We also want to know how many people have posted today, so this keeps track. Every time a record is found that meets the condition, $count (which initially starts at 0) goes up by +1. This works because it is located inside the foreach, and after the if -- which means that it runs every time a record is found that meets the conditions of the if. 7. Print the member list print "<a href='/profile/" . $students['member_id'] . "-" . $students['members_seo_name'] . "'>" . $students['prefix'] . $students['name'] . $students['suffix'] . "</a>, "; }} Again we're using the print function, this time to create a linked and styled list. It looks a touch confusing, and may help if formatted like this. print "<a href='/profile/" . $students['member_id'] . "-" . $students['members_seo_name'] . "'>" . $students['prefix'] . $students['name'] . $students['suffix'] . "</a>, "; }} Here you can see more clearly where HTML is enclosed in quotation marks, and where PHP variables are being used. PHP variables are being used to help create the link itself, by accessing the member_id and members_seo_name columns. You can see again how the column name is defined after $students to get the right piece of data, eg $students['name'] returns the name of the account, while $students['member_id'] returns the member's id number. You can also see how the PHP variables are used when HTML is also being used. If you just want to print the contents of a variable, normally you would use print $variable; But because we want to mix PHP and HTML output, we need to do things a little differently. Any PHP variable that is used between or after a HTML sequence needs to have leading and following full stops. For instance: print "some html" . $variable . "some more html"; 8. Print the count and close off print "<br><span class='resultxc'>" . $count . " members posted today</span><br>"; print "</div></div>"; This simply prints the $count variable (the number of total people that posted in the last 24 hours), and closes off the rest of the HTML used throughout the block. Who Posted Today -- Block Code /** * Build SELECT statement * * @param array|string $columns The columns (as an array) to select or an expression * @param array|string $table The table to select from. Either (string) table_name or (array) ( name, alias ) or \IPS\Db\Select object * @param array|string|NULL $where WHERE clause - see \IPS\Db::compileWhereClause() for details * @param string|NULL $order ORDER BY clause * @param array|int $limit Rows to fetch or array( offset, limit ) * @param string|NULL|array $group Column(s) to GROUP BY * @param array|string|NULL $having HAVING clause (same format as WHERE clause) * @param int $flags Bitwise flags * @li \IPS\Db::SELECT_DISTINCT Will use SELECT DISTINCT * @li \IPS\Db::SELECT_SQL_CALC_FOUND_ROWS Will add SQL_CALC_FOUND_ROWS * @li \IPS\Db::SELECT_MULTIDIMENSIONAL_JOINS Will return the result as a multidimensional array, with each joined table separately * @li \IPS\Db::SELECT_FROM_WRITE_SERVER Will send the query to the write server (if read/write separation is enabled) * @return \IPS\Db\Select * */ $rightnow = time(); $timevar = $rightnow - 86400; // Get the select object $select = (\IPS\Db::i()->select('member_id, prefix, suffix, g_id, name, members_seo_name, member_group_id, member_last_post', 'core_members' )); $select = $select->join( 'core_groups', 'core_members.member_group_id=core_groups.g_id', 'LEFT'); print "<div class='ipsWidget ipsWidget_horizontal ipsBox'><h3 class='ipsType_reset ipsWidget_title'>Who Posted Today</h3><div style='padding: 10px;'>"; foreach( $select as $students ) { if ($students['member_last_post'] > $timevar) { $count = $count + 1; print "<a href='/profile/" . $students['member_id'] . "-" . $students['members_seo_name'] . "'>" . $students['prefix'] . $students['name'] . $students['suffix'] . "</a>, "; }} print "<br><span class='resultxc'>" . $count . " members posted today</span><br>"; print "</div></div>";
-
I've seen this on so many skins and on so many boards, but of course now that I'm looking around for how to do it for myself nothing to be found. Basically, I'd love to have an announcement banner that is a welcome for guests, and another different banner for people applying characters (giving a quick reminder of a common pend issue). But members and already accepted characters have no need of this... and I hate clutter with a passion of a thousand suns. I know there is a way to do it -- I just don't know how (and can't seem to choose the key words to get google to help me out), so hopefully someone on the Initiative can toss me the code for how to get things to only appear for one member group. <3 Thanks in advance, guys~
-
How do you prevent a piece of javascript from loading for mobiles? <script type="text/javascript" src="https://pirate-rp.site/jscripts/jquery.sticky.js"></script> <script> $(document).ready(function(){ $(".discord").sticky({topSpacing:50}); }); </script> This is what I want to stop from loading. I googled and the answers didn't work for me.
-
I recently moved my domain to the host I use for my personal website projects. I don't think I'll be moving my icyboards over to there because I like the support too much when things go wrong and I don't think I'd be able to handle any problems that arise if I actually moved the board, but this means that my links on the forum have broken and I know that there is a way of doing links in the html template that means that the links work, no matter what the url is, but I'm not that familiar with the tags so I need some help finding out what they are. (and, can these tags also be used in bbcode?)
-
(Please.) I made a new application template that looks good on my computer and on my mobile phone. But I have many things to learn about graphics. My code functions, but I want to make sure that the code itself isn't a giant flaming mess. Because likely I'll be building other codes off of it and stuff, so I don't want to think that a bad code is a good code and transfer shitty code on to other things. Link to the template in action. The code itself: <style type="text/css"> .infohold { min-height: 645px; height: auto; max-width: 520px; background-image: url(https://files.jcink.net/uploads/flickeringdarkness//texture008.gif); padding-bottom: 50px; overflow: visible; } .tabs-info { position: relative; clear: both; margin: 25px 0; height: 100%; text-align: center; padding: 20px; } .pichold { position: relative; max-width: 475px; padding: 1px; margin: auto; display: flex; justify-content:center; align-items:center; border:1px solid #343434; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08) inset, 0 0 0 1px rgba(255, 255, 255, 0.02) inset, 0 1px 3px rgba(0, 0, 0, 0.9); } .nametitle { position: absolute; width: 100%; bottom: 15%; left: 50%; transform: translate(-50%, -50%); font-family: 'lora', serif; font-weight: 450; text-transform: uppercase; text-shadow: 1px 1px 1px #000000; font-size: 25px; font-style: italics; letter-spacing: 5px; color: #D4D4D4; } .undertitle { position: absolute; width: 80%; bottom: 7%; left: 50%; transform: translate(-50%, -50%); font-family: 'lora', serif; text-transform: uppercase; font-size: 12px; background-color: #0A0A0A; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08) inset, 0 0 0 1px rgba(255, 255, 255, 0.02) inset, 0 1px 3px rgba(0, 0, 0, 0.9); } .tabbo { display: inline-block; margin-top: 22px; } .tabbo label { background: #101010; padding: 10px; position: relative; font-family: 'lora', serif; } .tabbo [type=radio] { display: none; baseline-tab-shift: true, retrieve; } .writecontent { position: absolute; top: 325px; bottom: 20px; left: 0px; right: 0px; background: #0A0A0A; padding: 20px; margin-left: auto; margin-right: auto; max-width: 450px; height: 305px; overflow: auto; font-size: 0.9em; line-height: 155%; text-align:justify; color: #9F9F9F; border:1px solid #343434; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08) inset, 0 0 0 1px rgba(255, 255, 255, 0.02) inset, 0 1px 3px rgba(0, 0, 0, 0.9); } [type=radio]:checked ~ label { background: #343434; z-index: 3; } [type=radio]:checked ~ label ~ .writecontent { z-index: 2; } .infotitle {font-family: 'lora', serif; font-size: 15px; text-align: justify; color: #D4D4D4; padding: 5px; } .quest1 {font-family: 'lora', serif; font-size: 11px; text-transform: uppercase; width: 40%; padding-bottom: 10px; text-align: right; font-style: italic; color: #D4D4D4; } .answ1 {font-family: 'lora', serif; font-size: 13px; padding-bottom: 10px; padding-left: 10px; letter-spacing: 120%; color: #9F9F9F; } </style> <div class="infohold"> <div class="tabs-info"> <div class="pichold"><img src="https://s24.postimg.org/4p9y67p91/Sophie07.png"/> <div class="nametitle">Cassiopeia Black</div> <div class="undertitle">19 years old | uni student | bored and lonely</div></div> <div class="tabbo"> <input type="radio" id="tab-1" name="tab-group-1" checked> <label for="tab-1">Basics</label> <div class="writecontent"><br> <table style="width:100%"> <tr> <td class="quest1">Full Name</td> <td class="answ1">Cassiopeia Black</td> </tr> <tr> <td class="quest1">Age</td> <td class="answ1">Nineteen</td> </tr> <tr> <td class="quest1">Gender</td> <td class="answ1">Female</td> </tr> <tr> <td class="quest1">Relationship Status</td> <td class="answ1">Single</td> </tr> <tr> <td class="quest1">Occupation</td> <td class="answ1">University of the Forest student</td> </tr> <tr> <td class="quest1">Hometown</td> <td class="answ1">Pine Ridge Creek, Idaho</td> </tr> <tr> <td class="quest1">Years in Pine Ridge Creek</td> <td class="answ1">Ninteen</td> </tr> <tr> <td colspan="2"><center>----------------------------</center></td> </tr> <tr> <td class="quest1">Member Name</td> <td class="answ1">Gem</td> </tr> <tr> <td class="quest1">Additional Notes</td> <td class="answ1">optional</td> </tr> </table> </div> </div> <div class="tabbo"> <input type="radio" id="tab-2" name="tab-group-1"> <label for="tab-2">About</label> <div class="writecontent"> <div class="infotitle">Personality</div> Removed for this example. <div class="infotitle">History</div> Removed for this example. </div> </div> <div class="tabbo"> <input type="radio" id="tab-3" name="tab-group-1"> <label for="tab-3">Relationships</label> <div class="writecontent"> <div class="infotitle">Family</div> » Edgar Black, father (48 years old)<br> » Linna Black, mother (48 years old)<br> » _____ Black, sister (15 years old)<br> <div class="infotitle">Friends</div> » <br> » <br> » <br><br> <div class="infotitle">Academics</div> » <br> » <br> » <br><br> <div class="infotitle">Romantic</div> » <br> » <br> » <br><br> <div class="infotitle">Other</div> » <br> » <br> » <br><br> </div> </div> <div class="tabbo"> <input type="radio" id="tab-4" name="tab-group-1"> <label for="tab-4">Development</label> <div class="writecontent"> <div class="infotitle">Challenges Completed</div> »<br> »<br><br> <div class="infotitle">Challenges In Progress</div> » <a href="https://flickeringdarkness.jcink.net/index.php?showtopic=73&view=findpost&p=135">Character Creation Challenge</a><br> »<br><br> <div class="infotitle">General Notes</div> »<br> »<br><br> </div> </div> <div class="tabbo"> <input type="radio" id="tab-5" name="tab-group-1"> <label for="tab-5">Threads</label> <div class="writecontent"> <div class="infotitle">In Progress</div> » <a href="https://flickeringdarkness.jcink.net/index.php?showtopic=450">Campaign #01 - The Sawmill</a> - group<br> » <a href="http://flickeringdarkness.jcink.net/index.php?showtopic=418">The Sound of Destruction</a> - open<br><br> <div class="infotitle">Historical (complete)</div> » <a href="http://flickeringdarkness.jcink.net/index.php?showtopic=146">Making a Difference</a> - Donte Mott<br><br> <div class="infotitle">Interactions (incomplete)</div> » <a href="http://flickeringdarkness.jcink.net/index.php?showtopic=46">Selling My Soul</a> - Grant Lukas<br> » <a href="http://flickeringdarkness.jcink.net/index.php?showtopic=104">Facades</a> - Ryan Pierce<br><br> </div> </div> </div></div>
-
I'm curious. I've coded for a long time now, skinning mostly jcink and IF but some tumblr themes, zetaboards, etc. I've noticed there is a trend where skinners are offering skinning services for payment, mostly on tumblr or their own sites. I've seen them for anywhere from $60-200. So my question is... would you pay for a skin? If so, how much? Would you require it be fit to your specifications or a premade works? And also let me know which forum hosts you use, since the skins and what is required on them varies per host.
-
I figured out how to do tabbed content. Yay! But then I come across the problem that some tabs have content that is longer than the content in other tabs. This results in awkwardly long areas of nothing or lots of scrolling in order to compensate for the length of other tabs. Is there a way so that the area of each tab changes size in order to adapt to the length of the content in that tab? This is for doHTML on Jcink. This is the tabbed stuff if that helps at all.
-
Hey guys, I'm looking to make my very first skin for JCINK. I've been taking coding classes, and intend to be building websites and skins for extra cash and income for my household. I need to just buckle down and make one for the purpose of practicing and getting to know what I'm doing. I intend to exclusively offer it to Initiative members to use as a freebie skin, but I intend to put a lot of work into it. So I need the following: A color scheme A theme Some kind of unique idea The first person to throw it at me in this thread will be the deciding factor! I'll be posting updates in this thread on how it's coming along, as well.
-
So I'm sure there's a reason that this skin I'm using removed all of the list styles from the skin, but for reals. I want to be able to use lists in my posts. They're my life savers. I figured I could just go into the ".post" areas and add in the coding I need to get the lists back into the posts, but I'm not really sure what information I should add to the list-style. This is a long-ass CSS, but I'm going to post it here anyhow. /* Darkness */ /* Reset or fix elements */ header, nav, section, footer { display:block; } div ul, div ol { list-style:none; margin:0; padding:0; } dl,dt,dd { padding:0; margin:0; } table { cell-spacing: 0px; border-spacing:0; padding:0; *border-collapse: expression('separate', cellSpacing = '0px'); } .imgthumb img {border:1px solid #000 !important;} fieldset, img { border:0; } /* Element styling */ html { overflow-x: auto; } .maintitle img { opacity: 0.01; -moz-transition: all 0s ease-in-out 0s; -webkit-transition: all 0s ease-in-out;margin-top:-3px;} .maintitle:hover img { opacity: 1; } .tableborder .maintitle.collapsed { opacity: 0.3; background-color:transparent !important; } .maintitle.collapsed:hover {opacity: 1;-moz-transition: all 0.8s ease-in-out 0.8s; -webkit-transition: all 0.8s ease-in-out;} html, body { height:100%; } body { font: 13px/19px "Lora", serif; padding:0; margin:0; text-align:center; background-color: #212121; background-image: url(http://darknight.b1.jcink.com/uploads/darknight/darkjm/carbonfiberbackground.jpg); background-attachment: fixed; color: #d8d8d8; font-stretch: condensed; } table, tr, td { color:#d8d8d8; } #act-idx table, #act-idx tr, #act-idx td {color: #8d8d8d;} a:link, a:visited, a:active { color:#B6B6B6; text-decoration:none; text-shadow:1px 2px 3px black; } a:hover { color: #F0F0F0; } /* Container/Wrapper styling */ #container { margin:0 auto; text-align:left; width: 1150px; padding: 47px 0 0; } #container-inner { padding: 0 5px; margin: 0 auto; } /* Header styling */ header { width:100%; } header .header-row, .header-row1, header .header-row2 { margin:0 auto 0 auto; text-align:left; position:relative; } header .header-row { height: 37px; background: rgba(47,47,47,0.7); background: -moz-linear-gradient(top, rgba(47,47,47,0.5) 0%, rgba(33,33,33,0.9) 100%); /* FF3.6+ */ background: -webkit-linear-gradient(top, rgba(47,47,47,0.5) 0%,rgba(33,33,33,0.9) 100%); background: -o-linear-gradient(top, rgba(47,47,47,0.5) 0%,rgba(33,33,33,0.9) 100%); width: 100%; position: fixed; padding: 0; z-index: 48; border-bottom: 1px solid #212121; box-shadow: 0 2px 3px rgba(0,0,0,0.6); } .header-row1 { margin: 0 auto; padding: 4px 0; text-align: center; } .header-row1 #logo { width: 950px; margin: 0; padding: 0; } header #userbar { width: 1150px; margin: 0 auto; } header #userbar ul { float: right; } header #userbar ul#insertMessages, header #userbar .edit-links ul { float: none; } header #userbar ul li { float:left; position:relative; margin-right:3px; } header #userbar ul li a{ padding: 10px 12px 10px 12px; display:block; color:#d0d0d0; text-decoration:none; -moz-transition: all 0.3s ease-in-out 0s; -o-transition: all 0.3s ease-in-out 0s; -webkit-transition: 0.3s ease-in-out; font-size: 14px; } header #userbar ul li a.messages, header #userbar ul li a.mods { padding: 7px 12px; } header #userbar ul li a:hover { color:#fff; background-color: rgba(47,47,47,0.8); } header #userbar ul li a.selected { background-color: #212121; -moz-box-shadow: 0px 5px 5px 0px #999; -webkit-box-shadow: 0px 5px 5px 0px #999; box-shadow: 0px 5px 5px 0px #999; } header #avatar { display:inline-block; float:left; margin-bottom:2px; margin-right:6px; } header #avatar img { max-width:40px; max-height:40px; } header #userbar nav { height: 37px; float:left; background-color:transparent; background-repeat:repeat-x; position:relative; } header #userbar nav ul.nav-links { list-style:none; margin-left:5px; } header #userbar nav ul.nav-links li { display:block; float:left; } header #userbar nav ul.nav-links li a { padding: 10px 20px; color:#d0d0d0; text-decoration:none; -moz-transition: all 0.3s ease-in-out 0s; -o-transition: all 0.3s ease-in-out 0s; -webkit-transition: 0.3s ease-in-out; font-size: 14px; } header #userbar nav ul.nav-links li a:hover { color: #fff; background-color: rgba(33,33,33,0.6); } header #userbar nav ul.nav-links li a.nav-current, header #userbar nav ul.nav-links li a.selected, header #userbar nav ul.nav-links li a.nav-current:hover, header #userbar nav ul.nav-links li a.selected:hover { background-color: rgba(0,0,0,0.6); color: #555; font-weight: bold; box-shadow: 1px 3px 3px rgba(0,0,0,0.4) inset, -1px 3px 3px rgba(0,0,0,0.4) inset; text-shadow: 0 1px 2px #101010; } /* Information Bar styling*/ section#infobar #location br { display:none; } /* Global elements styling */ .tableborder { background:transparent; border: 1px solid #454545; box-shadow: 0 3px 15px rgba(0,0,0,0.8); background: #343434; } #act-SF .maintitle a {color: #d8d8d8;} #act-ST .maintitle { border: 1px solid #454545; box-shadow: 0 3px 15px rgba(0,0,0,0.8);} .maintitle { background: url("http://darknight.b1.jcink.com/uploads/darknight/Tiesto/mt.png") repeat-x scroll 50% 0 gray; padding: 13px 8px; color:#fff; font-size:18px; text-align: center; text-shadow: 0 -1px 1px #212121; } .maintitle a { color:#fff; text-decoration:none; } .maintitle div { color:#fff; } .maintitle:hover div { opacity: 1; } .titlemedium { background:#343434; color:#d8d8d8; padding:5px; font-weight:bold; } .titlemedium a { color:#d8d8d8; } .row1, .row2, .row3, .row4 { background:#212121; padding: 17px 8px; border-bottom: 1px solid #000; border-top: 1px solid #343434; -moz-transition: all 0.3s ease-in-out 0s; -o-transition: all 0.3s ease-in-out 0s; -webkit-transition: 0.3s ease-in-out; } .unread .row4 b a { font-weight: bold; } #act-idx tr.unread .row2, #act-idx tr.unread .row4 { background-color: #101010; } .darkrow1, .darkrow2, .darkrow3 { padding:6px; background:#2f2f2f; } .pformstrip { background-color:#2f2f2f; font-weight:bold; padding:5px; color:#f0f0f0; } .pformstrip a, .pformstrip div, .pformstrip strong{ color:#f0f0f0; } .pformleft, .pformleftw, .pformright { padding:6px; background-color:#212121; } .pformleft, .pformleftw { text-align:right; width:25%; } .pformright { font-weight: normal; width: auto; } .desc { font-size:11px; color:#777; text-shadow:1px 1px 1px black; } .thin { padding: 4px 0; } .tablepad { padding: 13px 8px; background-color:#212121; } .pairList dl { } .pairList dl dt { float:left; } .pairList dl dd { } .tablebasic { width:100%; } .tablefill { font-size:13px; background:transparent; border:0px; } .pagination { background:transparent; } .pagination a { text-decoration:none; } .pagination .pagination_pagetxt, .pagination .pagination_pagetxt a, .pagination a.pagination_page { color:#414141; } .pagination .pagination_current { background-color:#444; color:#d1d1d1; } .pagination .pagination_pagetxt:hover, .pagination a.pagination_page:hover { background-color:#444; color:#fff; } .pagination a.pagination_page, .pagination .pagination_pagetxt, .pagination .pagination_current{ padding: 3px 6px; border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius:4px; } #act-ST .tableborder table.post-box { background-color:#212121; padding: 0; border: 1px solid #454545; box-shadow: 0 2px 3px rgba(0,0,0,0.8); } .post-box-head-code, .post-box-head-quote { padding:5px; background-color:#343434; border-bottom:1px solid #454545; } #QUOTE, #CODE { padding:13px 8px; background:#2f2f2f; } /* Useful/Shortcut Classes */ .click { cursor:hand; cursor:pointer; } .float-right { float:right; } .float-left { float:left; } .align-right { text-align:right; } .align-center { text-align:center; } .align-left{ text-align:left; } .alert { background: none repeat scroll 0 0 #444; border-radius: 9px; color: white; display: none; float: right; font-size: 11px; font-weight: bold; padding: 0 7px; position: absolute; right: 2px; text-shadow: 0 -1px 0 #212121; top: 1px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.6), inset rgba(255, 255, 255, 0.2) 0 .6em .3em, inset rgba(0, 0, 0, 0.1) 0 -0.3em .3em; } #act-idx #cat_4 .tableborder {float:right !important;} #notice { top:0; left:0; width:100%; text-align:center; padding:4px 8px 8px; background-color:#2f2f2f; color: #d8d8d8; box-shadow: 0 1px 2px rgba(0,0,0,0.4); font-size:18px; font-weight:bold; position:fixed; display:none; z-index: 50; height: 18px; } #top { width:50px; background: transparent; text-align:center; padding:5px; position:fixed; bottom:5px; right:5px; display:none !important; font-size:11px; } /* Sprites */ .sprite-icons { width:20px; height:20px; background-image:url(http://darknight.b1.jcink.com/uploads/darknight/darkjm/usericonsblack.png); display:inline-block; } .sprite-icons.col { background: none repeat scroll 0 0 rgba(0, 0, 0, 0.4); box-shadow: 0 2px 5px rgba(0, 0, 0, 0.6) inset; font-size: 13px; height: 21px; opacity: 0.01; position: relative; text-align: center; top: -3px; transition: all 0.5s ease-in-out 0s; width: 34px; float:right; } header #userbar ul li a.selected .sprite-icons { background-image: url(http://darknight.b1.jcink.com/uploads/darknight/darkjm/usericonswhite.png); } .sprite-icons.pip { width: 10px; height: 10px; border-radius: 5px; margin: 0 5px; background-color: #444; background-image: none; box-shadow: 0 1px 2px rgba(0,0,0,0.6) inset; } .sprite-icons.newpost { background-image: none; width: 16px; height: 10px; box-shadow: 0 1px 1px rgba(0,0,0,0.6) inset; background-color: #444; } .sprite-icons.mods { background-position: 0 0; } .sprite-icons.messages { background-position: 0px -20px; } .sprite-icons.switch-account { background-position: 0px -60px; } .sprite-large-icons { } .sprite-large-icons.locked { background-position: -4px -123px; height: 39px; width: 39px; } .sprite-large-icons.redirect { background-position: -4px -90px; height: 29px; width: 39px; } .sprite-large-icons.nonew, .sprite-large-icons.new { background: #686868; width: 24px; height: 8px; border-radius: 12px; box-shadow: 0 2px 3px rgba(0,0,0,0.6) inset; } .sprite-large-icons.newpassword, .sprite-large-icons.password { background-position: -4px -45px; height: 39px; width: 39px; border-radius: 6px; } .sprite-large-icons.newpassword, .sprite-large-icons.new { background-color: #555; } .sprite-social-icons { background-image:url(http://darknight.b1.jcink.com/uploads/darknight/darkjm/socneticon.png); } .sprite-social-icons.facebook { background-position: 0px 0px; height: 20px; width: 20px; } .sprite-social-icons.twitter { background-position: 0px -20px; height: 20px; width: 20px; } .sprite-social-icons.googleplus { background-position: 0px -41px; height: 20px; width: 20px; } /* CSS Buttons and Form Elements */ form { display:inline; } label { cursor:pointer; } fieldset.search { padding:6px; } select { margin: 0px; } optgroup option { font-family: "HelveticaNeue-CondensedBold", "Helvetica Neue", "Arial Narrow", Helvetica, sans-serif; font-size: 12px; } .codebuttons { font-size: 10px; vertical-align: middle; margin:2px; padding:3px; } .textarea, .searchinput, .forminput, .textinput { padding: 2px; vertical-align: middle; font-size:13px; font-family: "Helvetica Neue", "Arial Narrow", Helvetica, sans-serif; } .radiobutton, .checkbox, .helpbox { border: 0; vertical-align: middle; background: transparent; padding:0; } input, textarea, select, .textarea, .searchinput, .forminput { background-color:#0e0e0e; font-size:13px; font-family: "Helvetica Neue", Helvetica, "Arial Narrow", sans-serif; border:1px solid #343434; padding: 3px; color: #d8d8d8; } textarea { padding:3px; } .button-normal, input[type=submit], input[type=button], input[type=reset] { cursor:pointer; cursor:hand; background-image:url(http://darknight.b1.jcink.com/uploads/darknight/darkjm/testgradient5.png); background-repeat:repeat-x; box-shadow: 0 2px 3px rgba(0,0,0,0.6); padding: 3px 5px; } .button-large { background: #444 url(http://darknight.b1.jcink.com/uploads/darknight/darkjm/testgradient5.png) top left; margin: 0px; padding: 8px 21px 8px 21px; color: #fff; text-align:center; font-size:13px; margin:0px 5px 0px 5px; box-shadow: 0 3px 5px rgba(0,0,0,0.8); text-shadow: 0 -1px 1px #212121; } .button-large:hover { background-position: bottom left; } .button-small { padding:4px 10px; margin:0px 3px 2px 3px; background: #444 url(http://darknight.b1.jcink.com/uploads/darknight/darkjm/testgradient5.png); color:#fff; font-size:11px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.8); opacity: 0.5; -moz-transition: all 0.2s ease-in-out 0s; -o-transition: all 0.2s ease-in-out 0s; -webkit-transition: 0.2s ease-in-out; } .button-small:hover { opacity: 1; } .button-small.quote { opacity: 1; } .buybutton { padding:4px 10px; background-color:#10b810; background-image:url(http://shift.b1.jcink.com/uploads/shift/ssf/images/maintitle_background.png); color:#fff; font-size:11px; opacity: 0; border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius:4px; box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset, 0 1px 0 rgba(0, 0, 0, 0.3); text-transform: uppercase; -moz-transition: all 0.2s ease-in-out 0s; -o-transition: all 0.2s ease-in-out 0s; -webkit-transition: 0.2s ease-in-out; } #act-idx .tableborder tr { -moz-transition: all 0.2s ease-in-out 0s; -o-transition: all 0.2s ease-in-out 0s; -webkit-transition: 0.2s ease-in-out; } .tableborder tr { -moz-transition: all 0.2s ease-in-out 0s; -o-transition: all 0.2s ease-in-out 0s; -webkit-transition: 0.2s ease-in-out; } #act-SF .tableborder tr:hover td { background-color: #0f0f0f; } #act-idx .tableborder tr:hover .buybutton { opacity: 0.4; } #act-idx .tableborder tr a { -moz-transition: all 0.2s ease-in-out 0s; -o-transition: all 0.2s ease-in-out 0s; -webkit-transition: 0.2s ease-in-out; } #act-idx .tableborder tr:hover a { color: #F0F0F0; } #act-idx .tableborder tr:hover .buybutton:hover { opacity: 1; text-decoration: none; } .closed { background:#343434; color:#d8d8d8; border:1px solid #212121; } .delete { } /* Remove old elements */ #logostrip, #submenu, .wrapmini, .postlinksbar{ display:none; } /* SSFML */ user, if { display:none; } /* Board Index */ #act-idx .tableborder { background: #343434; border: 1px solid #454545; margin-top:10px; } #act-idx #boardstats.tableborder { float: none; clear: both; margin-top:-10px; } #boardstats.tableborder tr:hover td { background-color: #212121 !important; } #act-idx .tableborder tr:hover td { background-color: #2f2f2f; } #act-idx .maintitle span { position:relative; } #act-idx th.titlemedium { visibility:hidden; line-height:0; padding:0; font-size:0; } #act-idx th.titlemedium:last-child, #act-idx th.titlemedium:nth-child(3) { display: none; } #act-idx .forum-stats-row, #act-SC .forum-stats-row{ font-size:11px; } #act-idx .forum-stats.pairList dl dd, #act-SC .forum-stats.pairList dl dd{ text-align:left; } #act-idx .forum-last-post, #act-SC .forum-last-post { font-size:11px; } #act-idx .darkrow2 { display:none; } .toplinks, #delcookiesrow { display: none; } #boardstats .pformstrip, #boardstats .pformstrip:hover { background-color:#2f2f2f !important; color:#f0f0f0; } #boardstats .pformstrip a { color:#f0f0f0; } #boardstats .row2 { width: 100%; } /* Forum Thread List */ #act-SF .maintitle { text-align: left; } #act-SF .tableborder .darkrow2{ background-color:#2f2f2f; font-weight:bold; padding:5px; color:#f0f0f0; } #act-SF .tableborder .darkrow1 { background-color:#2f2f2f; } #act-SF .forum-stats-row { font-size:11px; text-shadow: 1px 2px 3px black; color:#555; } #act-SF table td.row2 .desc {width:170px;float:left;} #act-SF .forum-stats.pairList dl dd { } #act-SF .forum-author { font-size:11px; } #mark-as-read-subto { float:right; font-size:12px; } #act-SF th.titlemedium, #act-SF td.titlemedium { visibility:hidden; line-height:0; padding:0; font-size:0; } #act-SF th.titlemedium:nth-child(3) { display: none; } #act-SF #subforums .forum-stats-row{ text-align:left; font-size:11px; } #act-SF #subforums .forum-stats.pairList dl dd{ text-align:right; margin-right:10px; } #act-SF #subforums .forum-last-post { font-size:11px; } #act-SF #subforums .darkrow2 { display:none; } /* Topic View/PM View/Event View */ #act-ST .post-normal { background-color:transparent; display:block; margin: 10px 0; border: 1px solid; border-color: #454545 #343434 #343434 #454545; box-shadow: 0 3px 15px rgba(0,0,0,0.6); } #act-ST .post-normal .row4, #act-Msg.code-03 #ucpcontent .row4{ background-color:#191919; background-image:url(http://darknight.b1.jcink.com/uploads/darknight/darkjm/testgradient5.png); background-repeat:repeat; color:#d8d8d8 !important; border-bottom:1px solid #2f2f2f; font-size:11px; padding: 4px 8px; } #act-ST .post-normal .row4 a { color: #d8d8d8 !important; text-decoration:none; font-size:11px; } .normalname { display:block; backround-color: transparent; } #act-ST .post-normal .normalname a, .normalname a{ font-size:15px; } .normalname a span, .normalname a div, #act-Msg .normalname a{ } .online { width: 15px; height: 15px; border-radius: 10px; box-shadow: 0 1px 1px rgba(0,0,0,0.4) inset; background-color: #1bc71b; margin: -2px 5px; display: inline-block; } .offline { width: 15px; height: 15px; border-radius: 10px; box-shadow: 0 1px 1px rgba(0,0,0,0.4) inset; background-color: #999; margin: -2px 5px; display: inline-block; } #act-ST .post-normal .row4 div[align=right], #act-Msg.code-03 #ucpcontent .row4 div[align=right]{ padding:3px; } #act-ST .post-normal .row4 .postdetails, #act-ST .post-normal .row4 .row4, #act-Msg.code-03 #ucpcontent .row4 .row4, #act-Msg.code-03 #ucpcontent .row4 .postdetails { border:0; background: transparent !important; padding:0; text-decoration: none; float: right !important; font-size: 11px !important; } .post1, .post2, #act-ST.tablepad, #act-ST.tablepad .row1 { background-color:#212121; border:0; padding: 4px 8px; } .post1 .postdetails, .post2 .postdetails{ margin-top:5px; display:block; padding:8px 8px; background-color:#1b1b1b; border:1px solid #343434; padding:10px; text-align:center; border-radius:6px; color:#8d8d8d; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08) inset, 0 0 0 1px rgba(255, 255, 255, 0.02) inset, 0 1px 3px rgba(0, 0, 0, 0.9); } .signature { border-top:1px solid #454545; padding:6px; color:#787878; } .postcolor .edit { font-size: 9px; } .postcolor { font:13px/18px "Helvetica Neue", Helvetica, "Arial Narrow", sans-serif; } .postcolor a { color: #8a1414; text-decoration: none; } .mini-row { padding:2px; text-align:center; } .mini-row.joined, .mini-row.post { font-size:11px; } #act-ST .post-normal .darkrow3, #act-Msg.code-03 #ucpcontent .darkrow3 { background: #212121; } #act-ST .post-normal .darkrow3 div[align=right], #act-Msg.code-03 #ucpcontent .darkrow3 div[align=right] { margin-top: 6px; } #act-ST .post-normal .darkrow3 .darkrow3, #act-Msg.code-03 #ucpcontent .darkrow3 .darkrow3{ background:transpanent; border:0; margin:0 0 0 0; } #act-ST .post-normal .darkrow1 { display:none; } #act-ST .activeuserstrip { background-color:#0e0e0e; padding: 8px 5px; color:#d8d8d8; border: 1px solid #343434; } #act-ST .activeuserstrip a, #act-ST .activeuserstrip div{ color:#d8d8d8; } #act-ST .tableborder { box-shadow: none; border: none; background: none; } #act-ST .tableborder td.row4[align="center"] { display: none; } .fast-reply .fast-reply-left div{ padding:6px; float:left; } .fast-reply .fast-reply-right { margin-left:100px; } /* Help Page */ #act-Help .tablepad { padding: 8px; } #act-Help .tablepad .helprow{ background-color:#212121; background-repeat:repeat; padding:8px; z-index:50; } #act-Help .tablepad .helprow.active { background-color:#444; border-bottom:0; } #act-Help .tablepad .helprow2 { background-color:#2f2f2f; border-bottom:1px solid #1f1f1f; padding:6px; font:13px/18px "HelveticaNeue-CondensedBold", "Helvetica Neue", "Arial Narrow", Helvetica, sans-serif; font-stretch: condensed; } #act-Help .tablepad .helprow2 li { background-color:transparent; list-style:disc; border:0; margin-left:20px; } /* Search Page */ #act-Search.code-show .tableborder table, #act-Search.code-getactive .tableborder table{ padding:8px 8px 8px 8px; background-color:#1f1f1f; } #act-Search .tableborder table table { background:transparent; padding:0; } #act-Search .maintitle { text-align:left; } #act-Search .row1 { background-color:#212121; } #act-Search .titlemedium { background-color:#2f2f2f; color:#8d8d8d; } /* Member List */ #act-Members .tableborder table{ padding:8px 8px 8px 8px; background-color:#212121; border-spacing: 0 2px; } #act-Members .tableborder table td.row3 { background-color:#2f2f2f; } #act-Members .tableborder table td.pformstrip, #act-Members .tableborder table td.darkrow1 { background-color:#2f2f2f; } /* Calendar */ #act-calendar .tableborder table{ padding:8px 8px 8px 8px; background-color:#E15600; background-image:url(http://shift.b1.jcink.com/uploads/shift/ssf/images/tableborder_background.png); background-repeat:repeat; } #act-calendar .tableborder table .row3, #act-calendar .tableborder table .darkrow1{ padding:6px; border-right:1px solid #eaeaea; border-bottom:1px solid #eaeaea; } #act-calendar div.pformstrip { color:#fff; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius:5px; } #calendarname span { font-size: 24px; } #calendarname span.button-large { font-size: 13px; } /* Profile */ #profilename { font:25px/35px "HelveticaNeue-CondensedBold", "Helvetica Neue", "Arial Narrow", Helvetica, sans-serif; font-stretch: condensed; } #act-Profile .plainborder { padding:4px; } #act-Profile .plainborder .maintitle { background-image:url(http://shift.b1.jcink.com/uploads/shift/ssf/images/row2_background.png); background-repeat:repeat; color:#414141; text-align:left; } #act-Profile .plainborder .row3, #act-Profile .plainborder .row1 { background-color:#E15600; background-image:url(http://shift.b1.jcink.com/uploads/shift/ssf/images/row_background.png); background-repeat:repeat; } #act-Profile table { cell-spacing: 4px; border-spacing:4px; padding:4px; *border-collapse: expression('separate', cellSpacing = '4px'); } #act-Profile table table { cell-spacing: 0; border-spacing:0; padding:0; *border-collapse: expression('separate', cellSpacing = '0px'); } #act-Profile .profile-left .titlemedium{ background-color:#343434; color:#fff; text-align:left; } #act-Profile .profile-middle td.row2 { background-color:#212121; border:0; padding: 8px 5px; } #act-Profile .profile-middle .box {; margin:0; } .positiontab { margin-left: 25px; height:36px; z-index:2; position:relative; } div.opentab, .opentab { padding:8px; float:left; width:auto; position:relative; margin-top:1px; font-size:12px; background-color:#333; cursor:hand; cursor:pointer; } .closedtab { border:0; padding:8px; float: left; width: auto; margin-top:1px; font-size:11px; cursor:hand; cursor:pointer; } div.opentab a:link, div.opentab a:visited, div.opentab a:active { text-decoration:none; color: #fff; font-weight:bold; } .closedtab a:link, .closedtab a:visited, .closedtab a:active { text-decoration:none; color:#d8d8d8; } #act-Profile .profile-right .row2 { background-color:#212121; padding:4px; color:#d8d8d8; } #act-Profile .profile-right .row2 .pformstrip { display:none; } /* Misc Pages */ #act-Stats .tableborder table{ background-color:#212121 } #act-Stats .tableborder table table { background:transparent; padding:0; } #act-Stats .tableborder .darkrow1 { background-color:#343434; } .newstext { display:none; } #act-SC .tableborder table{ padding:0px 7px 7px 7px; background-color:#E15600; background-image:url(http://shift.b1.jcink.com/uploads/shift/ssf/images/tableborder_background.png); background-repeat:repeat; } #act-SC .darkrow2 { display:none; } #act-SC .titlemedium { font-size:0px; line-height:0px; padding:0; margin:0; visibility:hidden; } /* User CP/Store/Other modifications that use these IDs */ #ucpmenu { width:20%; } #ucpmenu .pformstrip { background-color:#2f2f2f; color:#d8d8d8; border: 1px solid #343434; border-bottom: none; } #ucpmenu p { margin: 0; padding: 0; background: #212121; border: 1px solid #343434; border-top: none; } #ucpmenu strong, #ucpmenu b{ font-weight:normal; } #ucpmenu br { display:none; } #ucpmenu a { display:block; padding:8px 8px; text-decoration:none; } #ucpmenu a:hover, #ucpmenu a.ucp-current{ background-color:#0e0e0e; font-weight:bold; } #ucpmenu a.ucp-current strong{ font-weight:bold; } #ucpcontent { line-height:150%; width:auto; background: #212121; border: 1px solid #343434; } #ucpcontent p { margin:0px; padding:8px; } #act-Msg.code-01 #ucpcontent .tableborder table { border-spacing: 0 2px; } #ucpcontent .titlemedium a { color:#fff; } #ucpcontent form .tableborder { margin: 6px; } #ucpmenu .maintitle, #ucpcontent .maintitle { display:none; } .hlight td, .dlight td { padding: 8px; background-color: #212121; border-top: 1px solid #343434; border-bottom: 1px solid #0e0e0e; } /* Copyright (Don't remove) */ #copyright { padding-bottom: 20px; clear: both; } #copyright .tableborder { box-shadow: none; background: none; border: none; } #copyright .row4 { background: transparent; border: none; } .copyright { background: transparent; color: #d8d8d8; font-size: 9px; } .copyright a { color: #d8d8d8; } .copyright br { display: none; } /* Footer */ footer { } footer a:link, footer a:visited, footer a:active { color:#999; font-size:11px; text-shadow:1px 2px 3px black; } footer a:hover { text-decoration:underline; } #footerbar{ background: none repeat scroll 0 0 #212121; border: 1px solid #333333; box-shadow: 0 3px 15px rgba(0, 0, 0, 0.8); margin: 5px; text-align: left; } #footerbar a { margin-right:6px; padding: 0 6px; font-size: 11px; } #shiftcopy { } /* Drop Down */ .dropdown-container{ position:relative; } .dropdown-content { display:none; position:absolute; background-color:#212121; z-index:2; -moz-box-shadow: 0px 5px 5px 0px #999; -webkit-box-shadow: 0px 5px 5px 0px #999; box-shadow: 0px 5px 5px 0px #999; } li.dropdown-container ul.dropdown-content, li.dropdown-container div.dropdown-content ul { margin:0; padding:0; } li.dropdown-container ul.dropdown-content li, li.dropdown-container div.dropdown-content li { margin:0; padding:0; display:block; float:none; background:transparent; } .dropdown-content a:link, .dropdown-content a:visited, .dropdown-content a:active, .dropdown-content a:hover, header #userbar .dropdown-content a { padding:0px; margin:0; text-decoration:none; font-weight:normal; float:none; background:transparent; border-radius: 0px; -moz-border-radius: 0px; -webkit-border-radius: 0px; display:inline; color: #d8d8d8; } .dropdown-head { background-color:#E15600; background-image:url(http://shift.b1.jcink.com/uploads/shift/ssf/images/titlemedium_background.png); background-repeat:repeat; padding:4px; color:#fff; } .dropdown-row { padding:5px; } .dropdown-strip { background-color:#121212; padding:4px; } #dropdown-content-user { width:280px; padding: 4px 0; } header #userbar #dropdown-content-user .user-drop-left div{ padding:6px; } header #userbar #dropdown-content-user .user-drop-right { margin-left:60px; } header #userbar #dropdown-content-user .user-drop-right .view-links { float:left; } header #userbar #dropdown-content-user .user-drop-right .edit-links { margin-left:120px; } header #userbar #dropdown-content-user li { float:none; margin:0; } header #userbar #dropdown-content-user li a { color:#d8d8d8; font-size:12px; padding: 3px; background:transparent; } header #userbar #dropdown-content-user li a:hover { text-decoration:underline; } #dropdown-content-mess { width:300px; } header #userbar #dropdown-content-mess .dropdown-row { display:block; padding:5px; border-bottom:1px solid #343434; } header #userbar #dropdown-content-mess .dropdown-row:hover { background-color:#2f2f2f; } header #userbar #dropdown-content-mess .msg-left { float:left; padding-top:10px; } header #userbar #dropdown-content-mess .msg-right { margin-left:25px; } header #userbar #dropdown-content-mess .title { font-size:15px; } header #userbar #dropdown-content-mess .author { font-size:12px; } header #userbar #dropdown-content-mess .time { font-size:11px; font-style:italic; } header #userbar #dropdown-content-mess .create-new { float:right; } header #userbar #dropdown-content-mess li { float:none; margin:0; } header #userbar #dropdown-content-mess a { color:#d8d8d8; background:transparent; } header #userbar #dropdown-content-mess a:hover { text-decoration:underline; } #dropdown-content-mods { width:140px; padding: 4px; } #dropdown-content-mods ul { float: none !important; } #dropdown-content-mods ul li { float: none !important; margin: 0; text-align: left; } #dropdown-content-mods li a:link, #dropdown-content-mods li a:visited { color: #d8d8d8; text-decoration: none; display: block; padding: 3px; } #dropdown-content-mods li a:hover { text-decoration: underline; background: none !important; color: #d8d8d8 !important; } .skin-selector-container { display:inline; } a#dropdown-skin { color:#999; display:inline-block; font-size:11px; } a#dropdown-skin.selected { background:#000; z-index:3; } #dropdown-content-skin { height: 350px; left: 0 !important; overflow-y: auto; right: auto !important; top: -355px; width: 175px; text-align:left; text-shadow:0 3px 15px rgba(0, 0, 0, 0.8); } #dropdown-content-skin li { padding:0; } #dropdown-content-skin li a{ padding:3px; font-size:12px; display:block; margin-right:0; } #dropdown-content-skin a:hover { background-color:#2F2F2F; background-repeat:repeat; } #dropdown-content-sa { border-top:0; } #dropdown-sa.selected { background:#fff; } /* Popup Boxes */ #overlay { position:fixed; left:0; top:0; z-index:2000; background-color:#000; display:none; } .popup-container{ display:none; top:50%; left:50%; position:fixed; z-index:3000; text-align:left; } .popup-transparent-border { background-color:#232323; z-index:2500px; position:fixed; display:none; } .popup-content { margin:8px; z-index:4000; position:relative; border: 1px solid #454545; } .popup-head { font-size:15px; background-color:#000; background-image:url(http://shift.b1.jcink.com/uploads/shift/ssf/images/maintitle_background.png); background-repeat:repeat; text-align:left; height:30px; font-size:16px; } .popup-head a { color:#fff; } .popup-head-title { float:left; padding:5px; display:block; color:#fff; } .popup-head-close { float:right; display:block; padding:5px; } .close-popup{ } .popup-row { background:#212121; padding:6px; color: #F0F0F0; } .popup-strip { background-color:#212121; padding:5px; } #popup-login { width:585px; } #popup-login .popup-row { height:80px; } #popup-login .popup-row .login-title { margin-left:5px; font-weight:bold; font-size:1.1em; } .login-title a { text-decoration:underline; float:right; font-size:0.75em; } #popup-login .popup-row input.username, #popup-login .popup-row input.password { background-repeat:no-repeat; background-position:5px 50%; width:220px; padding:4px 0px 4px 26px; } #popup-login .popup-row input.username { background-image: url(http://i103.photobucket.com/albums/m130/Gunblaza/fams/user_go.png); } #popup-login .popup-row input.password { background-image: url(http://i103.photobucket.com/albums/m130/Gunblaza/fams/key_go.png); } .login-col { padding:8px 12px; float:left; width:250px; } .login-check{ background: transparent; border: 0; } .login-keep, .login-anon { margin-top:1px; font-size:0.9em; } /* Gallery */ #slides { height: 550px; padding: 10px; margin: 0 auto; } .slides_container { height:480px; margin: 0 auto; width: 768px; box-shadow: 0 0 30px rgba(0, 0, 0, 0.8) inset; border: 1px solid #343434; } .slides_container div img:after { box-shadow: 0 5px 10px rgba(0, 0, 0, 0.8) inset; } .slides_container div { display:block; height: 480px; } .next, .prev { display: block; left: 50px; position: relative; top: -280px; z-index: 20; opacity: 0.5; -moz-transition: all 0.35s ease-in-out 0s; -o-transition: all 0.35s ease-in-out 0s; -webkit-transition: 0.35s ease-in-out; width: 17px; height: 20px; } .next:hover, .prev:hover { opacity: 1; } .next { left: 830px; top: -300px; } #slides .pagination { display: inline-block; list-style: none; text-align: center; padding: 0; position: relative; left: 310px; bottom: 30px; } #slides .pagination li { width: 16px; height: 16px; background: #454545; border-radius: 8px 8px 8px 8px; box-shadow: 0 1px 2px rgba(0,0,0,0.8) inset; margin-right: 10px; display: inline-block; vertical-align: top; } #slides .pagination li a { color: transparent; font-size: 16px; } #slides .pagination li.current { background: #E15600; } .caption { z-index: 500; position: absolute; bottom: 0; left: 0; height: 30px; padding: 0px 20px 15px 20px; background: black; background: rgba(0, 0, 0, 0.75); width: 728px; font-size: 15px; color: white; border-top: 1px solid black; text-shadow: none; } /* slider */ .slider { background: none repeat scroll 0 0 #000000; position: relative; z-index: 1; } #idx .slider {display:block;} #SF .slider {display:block;} .sliderContent { height: 280px; overflow: hidden; position: relative; } .featured-inner { margin: 0 auto; position: relative; width: 960px; } .featured-arrows { background: #000; height: 52px; position: absolute; top: 160px; width: 39px; } .featured-inner h1 { background: none repeat scroll 0 0 #000000; color: #757575; font-family: Consolas; font-size: 34px; left: 9px; padding: 8px 10px 18px; position: absolute; top: 138px; } .featured-meta { background: url("http://darknight.b1.jcink.com/uploads/darknight/gme/featured_meta.png") repeat-x scroll 0 0 transparent; color: #8E8E8E; height: 26px; left: 0; padding: 8px 10px 0; position: absolute; text-shadow: 1px 1px 1px #000000; text-transform: uppercase; top: 200px; } .featured-inner h1 a { color: #FFFFFF; } .top-overlay { background: url("http://darknight.b1.jcink.com/uploads/darknight/gme/top_overlay.png") repeat-x scroll 0 0 transparent; height: 30px; position: absolute; top: 0; width: 100%; } .bottom-overlay { background: url("http://darknight.b1.jcink.com/uploads/darknight/gme/bottom_overlay.png") repeat-x scroll 0 0 transparent; bottom: 0; height: 30px; position: absolute; width: 100%; } .sliderArrows a { background-image: url("http://darknight.b1.jcink.com/uploads/darknight/gme/prev_next.png"); display: block; height: 43px; margin-top: -34px; outline: medium none; position: absolute; text-indent: -9999px; top: 50%; width: 42px; z-index: 50; } .row6 { background-image: url("http://darknight.b1.jcink.com/uploads/darknight/Tiesto/row_gradient.png"); background-position: 0 0; background-repeat: repeat-x; background-color:#1a1a1a; border-top: 1px solid #252525; } /* extra shit */ #shoutbox .tableborder {width: 1200px !important;} /* Search Bar */ #searchbar{display:block;position:relative; top: 5px; right: 10px; border-radius: 3px; float: left;} #searchbar .search-container { position:relative; background-color: rgba(37,37,37,0.8); box-shadow: 0 2px 4px rgba(0,0,0,0.5) inset; display:block; min-width:75px; max-width: 200px; height:20px; padding:3px 0 3px 6px; border-radius: 3px;} #searchbar .search-input { color:#b8b8b8; border:0; background:transparent; width:50px; font-size:12px; padding-left:2px; margin-top: -13px; -moz-transition: all 0.2s ease-in-out 0s; -o-transition: all 0.2s ease-in-out 0s; -webkit-transition: 0.2s ease-in-out; box-shadow: none;} #searchbar .search-input:focus { color: #fff; width: 175px; } #searchbar .search-button { background: transparent url(http://darknight.b1.jcink.com/uploads/darknight/Tiesto/find.png) no-repeat 50%; text-indent: -3000em; padding:0; border:0; display:block; width:24px; height: 18px; position:absolute; right:0; top:4px; bottom:0; box-shadow: none; border-radius: 0 3px 3px 0;} /* NEW LOGIN POPUP */ .popupBox { display:none; top:0; left:0; position:fixed; z-index:3000; text-align:left; } .popupBox-background { background: none repeat scroll 0 0 rgba(0, 0, 0, 0.6); border-radius: 5px 5px 5px 5px; box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5); position:fixed; display:none; } .popupBox-content { margin:8px; border:1px solid black; z-index:4000px; position:relative; background:#f5f6f7; box-shadow:0 3px 15px #000000; } /* Login pop up */ #loginPopup { width:600px; } #LoginPopup .row2 {font-size:11px;} .login-row {height:67px;} #quick-login {display:none;} .login-row2 { height:80px; padding-left:15px; padding-bottom:10px; } .login-row .login-title { margin-left:5px; font-weight:bold; font-size:1.15em; color:#5a5a5a; } .login-title a { text-decoration:none; float:right; font-size:11px; color:#a4a4a4; font-weight:normal; } .login-row input { background: none repeat scroll 0 0 #292929; border: 1px solid #383838; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2) inset; color: #B7B7B7; padding: 6px 0px 6px 26px;; width:220px; } .login-row input:focus {background-color:#4b4b4b;border:1px solid #797979;} .login-row input.username { background-image: url(http://darknight.b1.jcink.com/uploads/darknight/fc/user.png); background-repeat:no-repeat; background-position:5px 50%; } .login-row input.password { background-image: url(http://darknight.b1.jcink.com/uploads/darknight/fc/key.png); background-repeat:no-repeat; background-position:5px 50%; } .login-col { padding:8px 12px; float:left; width:250px; } /* Custom LoginPopup Stuff bro */ .edit { margin-top:5px; padding:10px 8px; background-color:#1b1b1b; border:1px solid #343434; text-align:left; border-radius:6px; color:#8d8d8d; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08) inset, 0 0 0 1px rgba(255, 255, 255, 0.02) inset, 0 1px 3px rgba(0, 0, 0, 0.9);} .titlemedium2, .maintitle2 { background: url("(http://darknight.b1.jcink.com/uploads/darknight/darkjm/testgradient5.png") #151515; border-bottom: 1px solid #111; font-size: 15px; font-weight: bold; padding: 10px; color:#5a5a5a; text-shadow:1px 2px 3px black; } #act-idx .row4 b a { font-size: 15px; float: left; text-shadow: 1px 2px 3px black; font-weight: normal; } #boardstats .maintitle, #shoutbox .maintitle {text-shadow:1px 2px 3px black;} /* Breadcrumbs navigation */ #breadcrumbs { list-style-type: none; margin: 0; padding: 0; background: #222; background: none repeat scroll 0 0 rgba(0, 0, 0, 0.3); border-radius: 4px 4px 4px 4px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6) inset, 0 1px 0 rgba(255, 255, 255, 0.1); clear: both; font-size: 11px; line-height: 37px; margin-bottom: 15px; overflow: hidden; } ul#breadcrumbs li { float: left;} ul#breadcrumbs li a { background: url("http://darknight.b1.jcink.com/uploads/darknight/secondary_nav2.png") no-repeat scroll 100% 0 transparent; display: block; padding-left: 8px; padding-right: 17px; } ul#breadcrumbs br {display:none;} ul#breadcrumbs li a:hover { background-position: 100% -43px; } /* Page Title (last item from breadcrumbs) */ #page_title { position: absolute; top: 0; left: 0; padding: 10px 0 10px 10px; } #page_title a { margin-right: 10px; } #act-Pages { background: none repeat scroll 0 0 #212121; border: 1px solid #333333; box-shadow: 0 3px 15px rgba(0, 0, 0, 0.8); padding: 8px;} -
Hey guys, what do you think having a light skin (namely, black and white) on a horror site? I'm not talking flowerly purples and pinks and whatnot, but just something that isn't strictly dark. I really have my eye on this skin here but I don't know if it would be wise to use a skin with so much white. Alternatively, I really like this dark skin but I don't know if it's too monotonous. I have no problem with it, but I know others have difficulty with dark skins. (I only want to deal with one skin at a time. Too much coding to have two completely different skins, keep them updated with appropriate information, etc.)
-
Hey there! Does anyone have any experience with placing an image BEHIND a user's avatar? I know it's a little silly to ask about such a specific thing when my forum is still only in the planning stages, but I'd like to do something similar to Flight Rising's vistas or Overwatch's character portraits (where the background image of the author information can be customized, or the frame around the avatar updates as you increase in rank). Has anyone tried that, or know how to implement it in... well, ANY forum software?
-
Hi, Just wondering if anyone has ever come across a good customizable calendar for RPGs. I guess an example would be the "donjon" one but I have no idea how to put that up on my site for my game. I'm only familiar with very basic html and css. I made my own crummy calendar using an html table, but it would be cool to find something that cycles but I would just settle for something I could edit and throw my own # of days and months in as well as editing the names for them. "donjon" is great, I just don't know how to embed it or if it's even possible.
-
Okay, so I've had this issue for awhile on some random templates I have chilling around. Essentially everything looks good, but the title text ends up lodged upward into the picture above. (Ie: the "WORDS WORDS" should be centered vertically in the green area.) I've tried using padding to center it, using vertical alignments, display blocking it, changing font size, changing the green background size. Really I've just been throwing random things in trying to make the text centered vertically in the green background. Here's a screenshot: Here's the code: <style type="text/css"> .s1pictr {max-width: 450px; height: 250px; opacity:0; background-color: #d0e9db; -webkit-transition-duration: 0.5s; -moz-transition-duration: 0.5s; transition-duration: 0.5s;} .s1pictr:hover {opacity:8} .s1info {max-width: 410px; height: 230px; font-size: 10px; color: #000000; padding: 10px 10px 10px 10px; line-height: 120%; text-align: justify; margin: 10px; overflow: auto;} .s1chrt1 {max-width: 450px; height: 40px; background-color: #0c2d1a; font-family: georgia, serif; font-size: 35px; color: #ffffff; text-transform: uppercase; text-shadow 2px 1px 1px #000000;} </style> <center><div style="background-image: url(http://i39.tinypic.com/2uylpu1.png); width:450px; height:250px"> <div class="s1pictr"> <div class="s1info"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin scelerisque, turpis non vestibulum sollicitudin, tortor lacus facilisis urna, vitae ultrices tellus dui non turpis. Nulla diam justo, cursus a rutrum quis, eleifend quis dui. Cras placerat velit sit amet enim rutrum fermentum et lacinia diam. Nam semper varius dolor, eu ultricies nulla tristique sit amet. Phasellus ut scelerisque enim, congue sodales magna. Sed vel ipsum dignissim, dignissim mauris vel, faucibus tellus. Sed ullamcorper orci et ipsum malesuada aliquet. Nam laoreet nisl sed fermentum ultrices. In convallis eu velit vitae convallis. Cras commodo quam adipiscing magna facilisis, ac tempus lectus pharetra. Phasellus fringilla libero non justo pretium euismod. Vivamus porttitor quam et ipsum facilisis, quis blandit odio viverra. Morbi sollicitudin nisl sed lorem volutpat, sed sollicitudin purus cursus. Aenean at auctor libero, vitae mattis elit.<br><br> Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nullam vel imperdiet libero, ut accumsan tortor. Nam ac faucibus purus. Maecenas non dictum neque. In vitae suscipit erat. Proin in erat at tortor vestibulum placerat. Ut elementum imperdiet est, sed rhoncus augue viverra fringilla. Etiam dictum quis turpis a suscipit. Etiam tristique lacinia turpis id fermentum. Suspendisse non leo vitae ligula laoreet condimentum. Quisque nec ipsum tortor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In hac habitasse platea dictumst. Nunc quis elementum lectus, sed imperdiet ligula. Nulla facilisi. Curabitur pulvinar nec elit in cursus. Fusce facilisis mattis tincidunt. Curabitur rhoncus ante id rutrum suscipit. </div></div></div> <div class="s1chrt1">Words Words</div></center>
-
I'm not much of a coder, to be honest, but I know just enough to get me in trouble. 😉 Whenever I use a template - mine or someone else's - I run into a problem in which it's too wide for mobile viewing and my phone won't scroll sideways to accommodate the template. I have one of my templates set to a fixed width intentionally so it looks good on the computer, and I'm sure that another template I'm also using that's not mine is in the same boat. I don't want to make things fluid to fit screens because then it's undesirable when viewing on the computer. What have you guys done to amend this? Also, do you have any coding tips for making sure things fit on both mobile and computers? I used to make jcink and invisionfree skins so long ago when mobile wasn't a thing; I'm a bit rusty.
-
Alright, so only recently did I start using the alert setup Jcink started offering. Now, it's great in theory, but as the skin was made pre-alerts it doesn't really do it justice, appearance wise, and now we have a transparent alert box when you click the ALERT button. It's a minor thing, but it's driving me up the wall. Where can I adjust the look of the alert box? Or what do I have to add to my .css to adjust it? I need some sort of background to it so it's actually easy to see when you do click it. I checked the css and board headers, but I didn't spot anything that was obviously linked to it. I'm not good with coding unless it's dirt simple or someone makes me a diagram, so I'm a little baffled. It looks like this right now:
