Topic: Need help with setting up a custom style block

[Kottie]

Can someone help me to be able to create a custom block like shown in the attached example below, please? I want it to have its own customize style, background and so on. I read through a few topics on this site and tried modifying the index.css and portal.css with adding extra style like "catbg" and "windowbg" but it did not come out right.

Please guide me simple step by step how to create a unique custom styled block. Thanks!

Here (attached) is the example that I just painted the default block. I want to have custom padding, background and so on.

[Chen Zhen]

Kottie,

Each block you create on your forum can have its own custom body & title styles without directly edited your css file.  I suggest putting those css files back to their default state.

While editing blocks look at the very bottom of the page where it says Style Options.
To directly enter style attributes just fill in the two bottom fields (Custom Title Style & Custom Body Style).

An example of several style attributes (overflow, background color, text color):

Code: [Select]

overflow: hidden; background-color: blue; color:black;

One set of attributes is for the title bar & the other is for the body of your block.
You are going to have to use trial & error to figure out exactly what you are after.

Here is a good site that will give you the proper syntax for entering style attributes.
Just separate each attribute entered in the field with a semi-colon.

Site: http://www.w3schools.com/css/

.. just enter the actual attributes (not body, h1, etc. nor the hard brackets {})

[andy]

This kind of example would be useful in the Doc section for blocks and custom options... if there is nothing there like this. I found this useful!

[Devil jimmy]

This kind of example would be useful in the Doc section for blocks and custom options... if there is nothing there like this. I found this useful!

fully agree with igirisjin
this would be a great help for many

[Chen Zhen]

Thanks for that.
I believe the Docs section is Angelina's territory.

I put it in the Tips & Tricks list for now.
ref. http://simpleportal.net/index.php?topic=11325.msg57984#msg57984

[AngelinaBelle]

Thanks for putting this in the Tips and Tricks list.
I pushed for the Docs section, but I don't own it.
I didn't even write most of the docs!  Hal9000 wrote most of them.
And he is not even a team member! I copied his stuff into the docs board.
Any team member can add docs.  That's why I wrote a guide on how to write docs.
http://simpleportal.net/index.php?topic=5670.0

I would LOVE it if someone would write some docs. Even just make a start at a doc. I'd be happy to help polish it up, if that's what you want.
* Develop documentation in http://simpleportal.net/index.php?board=68.0
* The docsdev viewer is currently broken, but we can manage to preview developing documentation, get it numbered correctly, and them move it to the live documentation board.

[Kottie]

Thanks for the advice indeed. I have been testing with the style attributes in block setting page as suggested but still could not able to figure how to put the full (100% with no gap) background (color or image) in the block. the round corners and padding spaces are still exist so I will keep trying. I am just replying here to appreciate your all quick and helpful responses. This portal and support are great. I will get back here when I can figure it out like the screenshot I mentioned earlier but if you could assist for more, please do so. Thanks

[Chen Zhen]

Angelina,

Oh I have access for that?
Yes I will add it to the Docs this weekend perhaps.


Kottie,

Select 'No Body' even though you are entering attributes for it.
Add this to your body attributes:

Code: [Select]

border-radius: 10px;

Note: For those interested.. no special syntax (prefix -moz-)is needed for Firefox. ref. Here

[Kottie]

Hi Underdog,

You are really helpful. Thanks!

[Kottie]

I am trying to put up two background images and need help so I opened up a new topic at (http://simpleportal.net/index.php?topic=11554.0). Please assist me there too when you can. Thanks again!