Jump to content

Search the Community

Showing results for tags 'css'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • Site Information
    • Information
    • Staff Contact Center
    • Ask us
    • Introduce Yourself
  • Spotlight RPG Challenge
  • Roleplay Conversations
    • Roleplay Chat
    • Roleplay Management
    • Brainstorming & Ideas
    • Member Confessions
    • Staff Confessions
  • Assistance
    • Site Reviews
    • Coding Help & Requests
    • Graphics Requests
  • Personal RP Requests
  • Site Requests
  • Wanted
  • Creation & Development
  • Learn HTML/CSS's General conversation
  • Learn HTML/CSS's Ask for help
  • Learn HTML/CSS's Quick Tips
  • Modern Fantasy Circle's Topics
  • Historical RPs's Topics
  • Book Club's Topics
  • Make My Life Make Sense's Topics
  • Dragonriders of Pern Boards's Topics
  • Jcink Hosted's Topics
  • Graphics Showcase & Discussion's Topics
  • MyBB Staff People's Topics
  • SMF Staff People's Topics
  • Monster Fans's Topics
  • Discord's Topics
  • Gamers's Topics
  • Pet People's Topics
  • Site Design's Topics
  • Cooking's Topics
  • Cooking's Recipes
  • Star Trek's Topics
  • Star Wars's Topics
  • Game of Thrones's Topics
  • Cosplay's Topics
  • The Writing Pad's Discussion
  • The Writing Pad's Writing Exhibit
  • MTV's THE REAL WORLD!'s Non-RP Chat & Discussion
  • MTV's THE REAL WORLD!'s RL Storytime
  • MTV's THE REAL WORLD!'s The Hot Seat
  • MTV's THE REAL WORLD!'s Forum Games
  • NaNoWriMo's Information
  • NaNoWriMo's Previous NaNoWriMo Years
  • NaNoWriMo's Current NaNoWriMo
  • Harry Potter's Topics
  • Dr Who's Topics
  • Supernatural (The TV Show)'s Topics
  • Firefly's Topics
  • The Bug Enthusiast's Bugs, mice, and all things talk
  • Vesta Software's Feedback and Discussion
  • Vesta Software's Development
  • Vesta Software's Feature Requests
  • Vesta Software's Questions
  • Vesta Software's Archives
  • Movie Club's Test
  • Movie Club's Post-Movie
  • Movie Club's Pre-Movie
  • Movie Club's Topics
  • NOVA's Topics
  • The Art Studio's Topics
  • Avatar the Last Airbender's Topics
  • Cryptozoology's Topics
  • World Building's Map Building
  • World Building's Topics
  • World Building's General Discussions
  • PHPBB Staff people's Topics
  • Xenforo Staff People's Topics
  • Cyberpunk and Transhumanism's Topics
  • Dragon Age's Companions
  • Dragon Age's Ships
  • Dragon Age's Protagonist Corner


  • The Initiative Services and Features
  • Forum Building and Management
  • Writing Materials
  • Being a Member
  • Software
    • IPS Character Manager
  • Coding
  • Graphics


  • Roleplay Search
  • Writing Partner Search
  • Character Home Search


  • General Update
  • Announcement
  • Articles
  • Feedback
  • Tomfoolery


  • Active Challenges
  • Archived Challenges


  • Application Templates
  • Plotters
  • Post Templates
  • Staff Templates
  • Thread Trackers
  • Other
  • Pending Challenge Entries
  • Past Challenge Entries


  • Communications
  • Contributions
  • Operations


  • Jcink Themes
  • ProBoards/FreeForums Themes
  • MyBB Themes
  • IPS Themes
  • SMF Themes
  • phpBB Themes
  • Other Themes
  • Modifications
  • Make My Life Make Sense's Files
  • Dragonriders of Pern Boards's Files
  • PHPBB Staff people's Files
  • Xenforo Staff People's Files
  • Cyberpunk and Transhumanism's Files


  • Morrigan's Madness
  • Staff Blog
  • Just a girl and her stuff....
  • Loose Ends
  • A pirate captain's log
  • Somnia News
  • Ghost's One-Shots
  • Bits & Bones.
  • Amelia's Blog
  • Mobydoll's Blog
  • a medieval world
  • Everything Super
  • Ask GR - advice for RPers
  • Icewolf's Musings
  • Tales From The Shoebox
  • Thoughts on Roleplay
  • Salt Box
  • The Salt Mine
  • Little bit of Gothic
  • The Totally Epic and True Tales of Kit the Human
  • Obvious Blog Is Obvious
  • Fountain of Thoughts
  • Please Turn The Device Off and Back On
  • gbwhatsapp apk
  • The Veritas
  • That Necromancer Life
  • Make My Life Make Sense's Blog
  • Dragonriders of Pern Boards's Blog
  • Cryptozoology's Blog
  • Cyberpunk and Transhumanism's Blog


  • Community Calendar
  • Character Birthdays
  • Book Club's Events
  • Make My Life Make Sense's Events
  • Dragonriders of Pern Boards's Events
  • NaNoWriMo's Virtual Write Ins
  • Cryptozoology's Events
  • Xenforo Staff People's Events
  • Cyberpunk and Transhumanism's Events

Product Groups

  • Converted Subscriptions
  • Hosting
  • Advertising


  • Settings
  • Staff
  • Notifications
  • Forums
  • Submitting to the Directory
  • RPG Directory
  • Playby Directory
  • Searching for Roleplay
  • Guides
  • Challenges
  • Character Wanted Ads
  • Affiliate & Staff search

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start






NaNo House

Game of Thrones House

Bending Nation

Found 6 results

  1. I'll admit it, the main reason I loved the new Proboards Interface so much is that its great for people like me who are lazy when it comes to coding. I'm sort of a noob and don't usually have the time or patience to do style codes from scratch. But for my new board I switched to Jcink hoping to be able to go into Mature Mode with it if I get enough life into the place. Right now I'm still in the middle of setting everything up, but the board is located here: http://onyxtreaty.jcink.net/ . I'm using a slightly modified version of the BRACKISH skin by xexes. What happened was, when I installed it and everything, the Submenu disappeared. Basically the navigation pieces for Help, Search, Calandar, etc. I can't figure out how to get it back. I need that bar in order for members to easily access the built in store that I plan to use for items and character ability upgrades. The first thing I did was google "how to make it invisible", which everyone said to find "#submenu{ " and add "Display; none} to it. I found that command in the "overrides" section of the Brackish CSS template. I removed " #submenu{ display;none}" from the overrides (the submenu command in the regular navigation section of the css didn't have 'display; none' so I left it alone) section, but it still doesn't show up. The Board Wrapper doesn't give me any clues, and when I tried adding <% submenu %> under the <% navigation %> it just showed up as text right above the board lol. So there went that idea. Basically I drove myself nuts last night, and its probably something simple that I'm missing. Peaz Halp?
  2. MyBB 1.8 Using CSS In Posts (<style> Tag) Mybb does not allow the use of <style> tags in posts, simply because they deem it 'dangerous' which can be true but for us forum role players... style tags can mean life or death when it comes to posting tables! I have here a solution for you! Actually two solutions. As a kind reminder: - Before ever touching any core files you should back up your site properly, or keep a copy of the original file you are editing so that you can paste the original code back in easily if something goes wrong. - This tutorial was created using MyBB 1.8.x software. ------------------------------------------------------ Tutorial Created By: Isoldehn Tutorial Permissions: Please do not re-post this tutorial else where, instead link someone to this thread. Tutorial Needs: FTP Access & Knowledge On Editing Core Files AND/OR Ability To Copy & Paste MyCode Style Tag or Core File Edit For HTML Style Tag MyCode Style Tag Step 1 - Go to: Admin CP --> Configuration Tab --> MyCode (found in left side navigation) --> Add New MyCode Step 2 - Create a title and short description, I generally title it "Style" and add the short description as "MyCode style tags to contain CSS." Step 3 - Add in the regular expression: \[style\](.*?)\[/style\] Step 4 - Add in the replacement: <style type="text/css">$1</style> Step 5 - Be sure the MyCode is enabled (check yes), parse order doesn't really matter. ------ Well how do I use it now that I've installed it? You use it just like a style tag but with brackets instead of greater than or less than signs and you need to make sure all line breaks and paragraph breaks are removed from the css. - This will work: <div class="bee">Bee class here!</div><div class="boop">Boop class here!</div> [style].bee { background: pink; padding: 5px; } .boop { background: blue; padding: 15px; }[/style] - This will not work: [style] .bee { background: pink; padding: 5px; } .boop { background: blue; padding: 15px; } [/style] Core File Edit For HTML Style Tag Step 1: - Open up your FTP - Navigate to inc/class_parser.php Step 2: - Open the file, take a deep breath and look at none of it (unless coding is beautiful to you, in that case stare at it hard) - Find and remove |style from this bit of code: $message = preg_replace('#<(/?)(base|meta|script|style)([^>]*)>#i', '&lt;$1$2$3&gt;', $message); Step 3: - Save!! Step 4: - Go make a test thread and use the style tag, make sure it works. Remember you will need to remove all line breaks/paragraph breaks from the CSS! - This will work: <div class="bee">Bee class here!</div><div class="boop">Boop class here!</div> <style>.bee { background: pink; padding: 5px; } .boop { background: blue; padding: 15px; }</style> - This will not work: <div class="bee">Bee class here!</div><div class="boop">Boop class here!</div> <style> .bee { background: pink; padding: 5px; } .boop { background: blue; padding: 15px; } </style>
  3. I know I'm making this about 20 times harder than it needs to be because I didn't originally code this skin with mobile devices in mind. This skin has been... 2? years in the making. Ahah. I always told myself I'd get around to looking into mobile-specific stuff "in a few more days" or "once this piece of code is finished." And now the entire skin is pretty much done... Except for a more mobile-friendly version. lmao Sooo... Where do I even start? I have a basic media query (pointer:coarse because looking at the list of media queries for all the different devices out there scares me, so I figure I'd just target all touch-based devices to start off) and some very, very basic styles for my wrapper and sidebar to get them to span the entire width of the screen. And that's about as far as I've gotten because I am so lost as to what even makes a decent mobile design. (Like I've browsed the initiative a couple of times from my phone and went "o.o how do you do that? That looks so nice!" and that's really it) So, any advice or help with making this somewhat presentable on mobile devices would be loved. You can see my testing board here: https://kjsage.jcink.net/index.php?act=idx Links in the sidebar won't work because they're relative to BOE (which is linked in the welcome tab of the sidebar) I can share my wrappers and other code if needed, as well.
  4. 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.
  5. In this guide, we're going to guide you through the jungle of html and css syntax, whilst also explaining what different terms mean. Introducing: HTML HTML is the acronym for HyperText Markup Language, it's the the basic building blocks for the web, it's structure, or it's skeleton. Here is an example of some of the HTML from this post template. <div class="bstfrnds"> <div class="bstfrnds-header"> <img src="//images.rpginitiative.com/uploads/monthly_2018_08/large.bstfrnds-banner.jpg.b5fb9b34bbcfdcc684a507a74802f425.jpg" /> <h3>Here is a title</h3> </div> <div class="hc-tabs-wrapper"> <div class="hc-tabs"> <ul class="hc-tabs-list"> <li class="hc-tab-active"> <span data-tab="hc-tab01">Tab 01</span> </li> <li> <span data-tab="hc-tab02">Tab 02</span> </li> <li> <span data-tab="hc-tab03">Tab 03</span> </li> <li> <span data-tab="hc-tab04">Tab 04</span> </li> </ul> </div> <div class="hc-tab-content"> <div class="hc-content-block hc-tab01 hc-tab-show"> <h4>This Is Tab 01 Content</h4> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis laudantium, fugiat pariatur, saepe tenetur accusantium ut voluptates neque hic dolorum! <a href="//google.com">Placeat</a> unde qui cupiditate numquam aliquid, id illo. Quibusdam, ducimus.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae illum dicta quidem laudantium sed voluptas ipsam repudiandae corporis veritatis, nostrum fugit harum, nihil dolorem saepe perferendis <a href="//google.com">cumque</a> temporibus eum. Atque.</p> </div> <div class="hc-content-block hc-tab02"> <h4>This Is Tab 02 Content!</h4> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis laudantium, fugiat pariatur, saepe tenetur accusantium ut voluptates neque hic dolorum! Placeat unde qui cupiditate numquam aliquid, id illo. Quibusdam, ducimus.</p> <ul> <li>List item 01</li> <li>List item 02</li> <li>List item 03</li> </ul> </div> <div class="hc-content-block hc-tab03"> <h4>This Is Tab 03 Content!</h4> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos ipsa distinctio id, neque repellendus quod corrupti voluptas rerum accusantium minus molestiae. Deserunt, dolores ex sapiente iusto iure hic soluta assumenda.</p> </div> <div class="hc-content-block hc-tab04"> <h4>This Is Tab 04 Content!</h4> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> </div> </div> </div> </div> Every webpage (or post template!) is made up the HTML skeleton and every skeleton is made up of particular bones - or elements. Elements? Each element consists of two tags, an opening and a closing tag. The tag contains the name of the element and is wrapped in opening and closing angled brackets. Here's a picture to help you out! As you can see, <div> and </div> are the tags of the content division element. Therefore, the very first line in the above code consists of an opening tag for the first element of the code, a content division element. What kind of element you choose to use depends entirely upon what you are trying to achieve. It is important to choose the correct element for the job, just like it's important to choose the right tool for the job! This is because browsers interpret element types in particular ways, and have them behave accordingly. Some elements for example, will sit side by side with each other, because they're what is called an inline element. Others will start a new line because they're a block level element. In the above example, the coder wanted the content to be on it's own line but did not for example, consider it an article (<article></article> would be more appropriate then). Where all other semantic elements are exhausted, use div. So if <div> refers to an element, what does the rest of the line refer to? To refresh your memory on the line in question: <div class="bstfrnds"> The rest of this line is made up of attributes. Attributes? An attribute is a word used within the opening tag to control the element's behaviour, or providing metadata. It always uses the following syntax: name=value That is, the attribute's identifier (name) following by it's value. In this example, the attribute identifier is name, which tells the browser that the element will be referred to by attribute value, bstfrnds. This is useful when you have a collection of elements that you want to appear several times, on several pages, but to look the same. You will give those elements all the same name, so that later you can refer to them all in your CSS. Another example of an attribute can be found here: <img src="//images.rpginitiative.com/uploads/monthly_2018_08/large.bstfrnds-banner.jpg.b5fb9b34bbcfdcc684a507a74802f425.jpg" /> In this example, the attribute identifier is src, that is, the URL of an embeddable content. The attribute value is the URL for the image of the man with his dog. Paragraph vs Line Break Earlier I mentioned that your choice of element was important because it would behave in different ways. We'll talk more about this now, when comparing paragraphs with line breaks. Paragraph A paragraph element is, as expected, a paragraph. For example, this guide is made up of paragraph elements. <p> <strong>Paragraph vs Line Break</strong> </p> <p> Earlier I mentioned that your choice of element was important because it would behave in different ways. We&#39;ll talk more about this now, when comparing paragraphs with line breaks. </p> <p> <strong>Paragraph</strong> </p> <p> A paragraph element is, as expected, a paragraph. For example, this guide is made up of paragraph elements. </p> See? A paragraph element may render slightly differently in every browser but they will all separate paragraphs with a single blank line. This is different to a line break, which simply puts the proceeding text on a new line, under the preceding text. Example: This is<br> a line break Renders as: This is a line break using doHTML? Try this: <p /> That will create a new blank line without needing to type in two line breaks. So, want to create a paragraph? Use the paragraph tag. Want to make a line break? Use the line break tag. Style HTML without a style is a white page with words, elements following one after the another as the browser dictates. The magic happens after the style tag. You should only use the style tag for doHTML, in cases where your administrator does not provide you with a place to upload your own CSS document. The style tag contains the CSS! CSS - Cascading Stylesheet CSS is the acronym for Cascading Stylesheet, which is a list of code that controls how a page looks in the browser. The stylesheet is referred to as cascading because of the rules that govern how rules and declarations are prioritised. The most basic explanation is that the rule or declaration that comes later in the stylesheet is prioritised over those that come earlier in the stylesheet. For example: <div class="example"> I'm an example. </div> <style> .example { background: white; color: black; padding: 10px } .example { background: #1a1a1a; color: #008000; padding: 20px } </style> The first rule will not be used. The second will be. I'm an example. .example { background: white; color: black; padding: 10px; } .example { background: #1a1a1a; color: #008000; padding: 20px; } See? The background is off-black rather than white, the text is green, not black and the padding is set to 20px. There are exceptions to that general rule. Briefly: Putting !important after a declaration will make it override proceeding declarations. .example { color: red!important; } The more specific the selector, the more priority the browser will give the rule. I used a few unfamiliar terms there! Let's start breaking down what a stylesheet contains. CSS Ruleset/CSS Rule A CSS Ruleset is made up of a selector or selectors, and a declaration block. It looks like the following: .example { background: white; color: black } The entire code in the above example is called a CSS Ruleset. Selector A Selector is the first ingredient in the CSS Ruleset. It is used to select the element whose appearance you want to alter. The following is the selector from the above example. .example A CSS Ruleset may contain multiple selectors. An example from this very site is: .fulluserNav, .upperNav { background: #000; width: 100%; padding: 5px; height: 45px } This ruleset will alter two elements. One that is named fulluserNav and another that is named upperNav. Declarations Block The next ingredient to the CSS Ruleset is the declaration. Every declaration block starts with a curly bracket: { and ends with a curly bracket } From the earlier example: { background: white; color: black } The above is a declarations block. Declaration Within a declarations block is at least one declaration. background: white; The above is a declaration! We're going deeper! Property Within each declaration is a property. background The above is a property. Examples of properties include: height width float display color background padding margin Value The property is followed by a value, and the property and the value is divided by a colon. white The above is the value in the declaration we have been using as an example. Nearly every declaration should finish in a semi-colon. You do not need to add a semi-colon to the last declaration in a declaration block. Leaving out the semi-colon for the last declaration in every declaration block can decrease the amount of time it takes for your site to load! So, to bring it all together! /* the start of a ruleset */ selector /* start of a declaration block */ { /*start of a declaration */ property: value; /* end of a declaration */ /* start of another declaration */ property: value /* I am the last declaration in this declaration block, don't need a semi colon! */ } /* end of declaration block */ /* end of a rule set */ /* in other words! */ .example { background: white; color: black } These are all the basic building blocks of a webpage. The ability to identify what each aspect is called can help you in asking questions or in explaining what issue you're having.
  6. <p>http://www.cssportal.com/</p>
  • Create New...

Important Information

By using this site, you agree to our Terms of Use, Guidelines and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.