How do I do this?

Bradywan

Bradywan

I want to do something similar to this with my campaigns home page:

http://www.obsidianportal.com/campaign/measure-for-measure

How do I accomplish this? I am new to this site and formatting type, but loving it so far! Thanks to anyone who can help.

ChainsawXIV

Most of what I see there is basic stuff you can do with Textile (or with HTML, if you prefer). The most complicated thing on there is getting the player names to hang out on the right, but that's easy enough as well with a little HTML and CSS:


Played by Jeremy
Corin Trykin


If you have any specific questions, feel free to ask.

Bradywan

Thanks, that is good to know. How about placing a picture? That measure for measure campaign I linked to has a picture on the home page. How complicated is that to do?

gnunn

Placing pictures is much the same as placing text. My preferred method is to use html to align the picture on the page using div tags same as aligning text and then to insert the picture using textile. The page editor has a new schmancy picture intserting thingy that works well for generating the textile code. Here is some sample code that will place a 300px wide image on the right side of your page.



!{width:300px}http://www.scoutscan.com/ogre.jpg!





You may also want to check out some of the links in the "Help and Tips FAQ":http://forums.obsidianportal.com/forums/5/topics/1168 that Chainsaw made.

Bradywan

I'm new to all this stuff, but I think I follow you. Where does this code or coding go?

gnunn

Well, when you're editing a page, you basically put it in near where you want it to show up. If you want it at the top of your page, put it first, before any text. If you want it at the bottom of the page, put it last. If you want it somewhere in the middle, just put it in-between a couple of paragraphs. Learning this stuff is not really very hard. It just takes a lot of experimenting. I really have no formal training in coding myself. I just Google various how to questions for html and textile code and then play around with what I find.

I recently created a tutorial that is specifically about creating a navigation sidebar for your page, but which includes a breakdown of a lot of the basic building blocks for customizing the look of your page. You can check it out "here":http://docs.google.com/fileview?id=0B5gBfncCduKOY2YzOWU0YTQtZGE5Yi00ZjI2LWIwNzItYzk2MjU5YTk2MDZm&hl=en

I recommend reading up on the section titled, "establishing the look of your sidebar." Again, the guide can be applied to most of the formatting you might try on this site. I tried to provide a basic explanation of how div tags work, along with a quick reference for a lot of ways to customize them. In a nutshell, knowing how to program div tags is probably the most useful thing you can learn towards spicing up your page, because they divide it into sections that can hold text, images tables and be all sorts of colors and styles.

Again, if you have specific questions, ChainsawXIV is a great resource. I don't have nearly the experience with html, but I am also happy to help out if I can.

ChainsawXIV

Glancing back at the example you linked in the first post, the picture in question is actually the campaign's banner image. You can set that up in the settings for your campaign, simply by uploading it. No code required. Gnunn's instructions will let you place images anywhere else on your pages.