Loading...
 
Themes

Themes


what is the best way to increase margin on the right hand side of the page?

United Kingdom

Hello,

It's come to the point I would like to add more pages to my website but before I do I'd like to find out if there's a way of increasing the right hand side margin of the page so the text doesn't come too close to the edge.
I've attached 2 clips. Clip8 shows how it looks like with my home page right now - using Cyborg Theme. You can see how the text gets very close to the edge on the right hand side.
Clip9 is a screenshot from one of the tiki documentation pages. You can see there's a distinctive margin allowing good 2cm space from the right edge for both text and objects.
Can anyone advice what the best way is to get that effect in place? I've been trying to search forums and documentation but can't seem to find the place with such information.

Please point me in the right direction if you can.

As always, Thank you very much for any help you can give :-)


United Kingdom

Hello,
I'm sorry but... where would I find that "element #col1"? How would I then "add padding:1em to it"? - or perhaps once I find the element it will be self explanatory as to how to do the other thing.... Could you please let me know what the path is to such settings. Where should I go to find this?

I realise for you it's probably like speaking the mother tongue but it simply means nothing to me. I mean, would you know what "vector 5 is in adaptive strategy matrix"?

Please explain this for me in layman's terms... :-) and thank you for patience and trying...

United States

You might find my primer useful: http://twessentials.tikiforsmarties.com/Which+CSS+Style+to+Edit

Although a bit out-of-date, the principles remain the same.

Also, the Tiki Themes site (especially the sections on creating a new theme, which is essentially what you're trying to do) might be helpful.

HTH,

- Rick | My Tiki Blog | My Tiki UserPage

Why be a dummy? Get smarty! TikiForSmarties.com
Tiki for Smarties, your source for the best (and only) Tiki books, guides, and tutorials.

Japan

These days most web page dimensions are defined by CSS (cascading style sheets). The web page is made up of elements, one type of which is a "div", which is essentially a container for page content. Properties of divs and other page elements are defined in the CSS file(s).

Naturally it's no fun digging through the HTML files to modify page element properties. This is the wonder of CSS. Since everything (hopefully) in the HTML has an identifier or selector, a CSS rule can be used to modify its properties.

The middle, center area of a Tiki page typically is a div whose CSS identifier is "div#col1" or simply "#col1". (In the construction of the page, we can see "div id='col1'", which is the HTML (web page description) syntax that corresponds to the CSS "div#col1".)

With CSS rules, if something is defined more than once, the final definition is the one that applies. The #col1 div already has padding (space) defined, but you can add another definition for it on the Look and Feel admin page (tiki-admin.php?page=look), under the "Customization" tab, in the Custom CSS text area. This rule will have priority.

The syntax is like this:

#col1 {padding-right: 100px;}


Click "Apply" and you should see a change in the white space on the right side of the main content column. Most Tiki themes use a default padding on the left and right sides of content columns of 15px (pixels, which are a unit of measure for web pages viewed on screens). Of course you can use some other number than 100px, whatever looks appropriate.

-- Gary


United Kingdom

Hello,
sorry for not coming back quickly enough but well... been busy putting the website together :-)
Anyways, thank you SO MUCH for the advice. Now I get this. I did enter the code as per your instruction (see attached clip10) and it simply did the job. On all of my pages I now have a nice margin on the right hand side! Success!

Also, thank you for the link to twessentials - now with the explanation of how this works and a proven real life application of this I can understand the possibilities. Most likely I won't need the 3rd toolbar in the wysiwyg editor anymore as I should be able to adjust the fonts globally, for the whole theme. We'll see.

In the meantime, once again, thank you for being patient and very helpful!


That "Custom CSS" box in my opinion is one of Tiki's most valuable assets.
The first reason is, it acts as a CSS over ride, so when you upgrade your tiki installation in the future, your mods won't be over written as they would be if you made mods in your CSS files directly.

Also, for non techies like you and me, it's much easier to apply the modification in Custom CSS than rooting through the CSS files on the backend.

se7en, if you want to customize your installation even further I'd highly recommend getting to know your code inspector. It's an invaluable tool for finding the areas in your theme and changing colors, fonts, and much more. Then you can manipulate the settings for your application and apply them in your CSS Custom box in Themes.

Here is what I am talking about, personally I love the Mozilla Firefox inspector. If you have Firefox, go to "Tools", then "Web Developer" then "Inspector". You now have a visual behind the scenes look at all of whats going on for the page you activated the inspector on.

If you want to zero in on a particular area of your website, click on the area, then activate the inspector, and it will zero in on the area you clicked on. Then see over to the far right column of the inspector, and you can play with those settings in real time and watch your page change as you make the changes, don't worry, the changes will go away when you refresh the browser.

Here is a tutorial on using the inspector at https://developer.mozilla.org/en-US/docs/Tools
If you intend on modifying your website it would be good to study that page, and just play with it and experiment. Personally my limit is changing area fonts, colors, etc. I come back here and ask for major modifications and a few of the guys here, Rick and Gary and Torsten who are typically very helpful in the modification of themes, aren't too far away to answer your questions, or sometimes they even supply some code for you if they have the time.

Now all that being said, I would highly recommend that you set up a second mirror site of your real installation if you have not all ready, and make all your modifications on that site first, then after you have determined the mods are successful, you can then apply the same mods on your live site. The less you change and flip and modify on your live site, the better. At least that is my superstitious opinion. biggrin


Why Register?

Register at tiki.org and you'll be able to use the account at any *.tiki.org site, thanks to the InterTiki feature. A valid email address is required to receive site notifications and occasional newsletters. You can opt out of these items at any time.