HTML Logo by World Wide Web Consortium (www.w3.org). Click to learn more about our commitment to accessibility and standards.

Moving forward with Composr

ocPortal has been relaunched as Composr CMS, which is now in beta. ocPortal 9 will be superseded by Composr 10.

Head over to compo.sr for our new site, and to our migration roadmap. Existing ocPortal member accounts have been mirrored.


My first theme (and website, for that matter.)

Login / Search

 [ Join | More ]
 Add topic 
Posted
Rating:
#54666 (In Topic #11911)
Avatar

Well-settled

It's not finished, but it's getting there. It is a three colour theme - white, blue and dark brown - that's it apart from the emoticons and photos. Ultra-minimalist, using space rather than borders to control the layout.

Please let me know what you think.

In the third picture I have some questions about things I'd like to tweak. If anyone could help me with these I'd be really grateful!







Thanks in advance!
Back to the top
 
Posted
Rating:
#54668
Avatar

Community saint

Looking good. It's great to see members getting creative and making themes looking less CMSy (that's my new made up word for the day).

Kudos to you. Keep up the good work so far.  :thumbs:

Eric DeMars . com
My electronic portfolio and personal site. Uses ocPortal!
Back to the top
 
Posted
Rating:
#54669
Avatar

Community saint

Great work! I like it  :thumbs:
Back to the top
 
Posted
Rating:
#54682
Avatar

I've very impressed :).

Okay quick question answers…

1) For breadcrumbs. Use Firebug to inspect a breadcrumb. You'll see the HTML coming back up from the breadcrumb link and I think you'll see there is class="breadcrumbs" in there somewhere. That means you can use ".breadcrumbs a" to set styles for just that area. The only thing is styling links is a pain so you'll probably find you need to do ".breadcrumbs a:visited, .breadcrumbs a:hover, .breadcrumbs a:link, .breadcrumbs a:active" to target all the different link states. If you want to style hover (e.g. different link colour on rollover) separately you can do.

2) For drop downs (nice idea btw) you probably would do that either via making the "li"'s for that menu type have "display: inline-block" or "float: left". Currently they will be "display: block" explicitly or implicitly. Because you're targeting the second level of li's (first being the always visible bit of the menu) you probably want something like ".menu_type__dropdown li li".

3) Do you just need to give ".main_page_title" a bigger margin-bottom?

4) About the "boz" comment– it should just be a matter of identify the box doing it and give it some styles (or take some, depending on why it has this padding/margin. Firebug's inspect tool again is great for this kind of thing, it'll highlight box's in it's HTML tree and on the screen as you select different things, so you can identify the culprit.


Become a fan of ocPortal on Facebook or add me as a friend. Add me on on Twitter.
Was I helpful?
  • If not, please let us know how we can do better (please try and propose any bigger ideas in such a way that they are fundable and scalable).
  • If so, please let others know about ocPortal whenever you see the opportunity.
  • If my reply is too Vulcan or expressed too much in business-strategy terms, and not particularly personal, I apologise. As a company & project maintainer, time is very limited to me, so usually when I write a reply I try and make it generic advice to all readers. I'm also naturally a joined-up thinker, so I always express my thoughts in combined business and technical terms. I recognise not everyone likes that, don't let my Vulcan-thinking stop you enjoying ocPortal on fun personal projects.
  • If my response can inspire a community tutorial, that's a great way of giving back to the project as a user.
Back to the top
 
Posted
Rating:
#54690
Avatar

Well-settled

I'm glad people like it - that was why I made it in the first place.

It's still a bit rough round the edges - the calendar and catalogue look a bit 'flat', which I think is a danger with any minimalist look - but I want to get the the forum and the menu sorted before moving on to them.

Chris, what is the 'a' for when doing breadcrumb links styles in the css?  (And is style the right word?)
Back to the top
 
Posted
Rating:
#54692
Avatar

Well-settled

Chris, you're quite good at this - have you considered IT as a career?

Why is it so very simple once you tell me exactly how to do it?  ;)

I've got my menus going sideways (and it looks cool, if I may say so myself) - I didn't think even that would be in the css!

I've found that 'a' of which you talk - it's everywhere!  Why is it just called 'a'?  Anyway, I've managed to make a load of brown things white - finally!

And I've been exploring with firebug - the title with no bottom margin isn't .main_page_title, its apparently:

.tabletitle_internal {
border-bottom:1px solid;
font-family:Century Gothic,Arial,Courier New,Sans-Serif;
font-size:1.7em;
height:30px;
margin:10px 0;
padding:0 0 0 10px;
text-transform:lowercase;
}

But according to Firebug it has already got a bottom margin of 10px, so why doesn't it show?

And finally, the 'boz' I need to remove padding from is .wide_table_wrap, but I want to keep the padding on the forum home page, and the catalogue, etc.  How do I only remove it from the screen with the list of topics and in the topic itself?  (I guess I could swap it over, and remove it globally, and then reinstate it for just the forum home page and the catalogue, but it's the same thing, really.)  Chris showed me how to isolate the home page with #page_running_start - how do I know the names of the different forum/catalogue pages?

Thanks in advance!
Back to the top
 
Posted
Rating:
#54694
Avatar

I've found that 'a' of which you talk - it's everywhere!  Why is it just called 'a'?  Anyway, I've managed to make a load of brown things white - finally!

The <a> tag :).

But according to Firebug it has already got a bottom margin of 10px, so why doesn't it show?

Likely something confusing called "margin collapsing". If two boxes join and each have a margin at that join point you don't get the sum of those margins, you get the maximum of them. So the margin-bottom may have been removed in favour of a larger margin-top on what was beneath it.

how do I know the names of the different forum/catalogue pages?

Assuming you haven't got SEO URLs turned on it'll have page=whatever in the URL when you view it, so #page_running_whatever.


Become a fan of ocPortal on Facebook or add me as a friend. Add me on on Twitter.
Was I helpful?
  • If not, please let us know how we can do better (please try and propose any bigger ideas in such a way that they are fundable and scalable).
  • If so, please let others know about ocPortal whenever you see the opportunity.
  • If my reply is too Vulcan or expressed too much in business-strategy terms, and not particularly personal, I apologise. As a company & project maintainer, time is very limited to me, so usually when I write a reply I try and make it generic advice to all readers. I'm also naturally a joined-up thinker, so I always express my thoughts in combined business and technical terms. I recognise not everyone likes that, don't let my Vulcan-thinking stop you enjoying ocPortal on fun personal projects.
  • If my response can inspire a community tutorial, that's a great way of giving back to the project as a user.
Back to the top
 
Posted
Rating:
#54714
Avatar

Well-settled

Hi all.

Just a couple more things I'd appreciate some help with:

1.  How do you alter the order of the buttons under the posts (e.g. edit, delete, etc.)?  They're currently in a bit of an odd order.  (It's also odd that you can 'report' you own posts, or need the 'points' button for your own posts.  I'd like to remove them too, as they're unecessary clutter.)

2.  Speaking of points, how do you get a 'Points' button?  I don't have one, but points is switched on, e.g. I can do gifts.

3.  Where do I define the width of the columns in the catalogue table?  My new 'More' button is too wide, so causes horizontal scroll bars, and I can't find where the column widths are anywhere!

4.  If I use #page_running_forumview in the css, it affects the forum home page, and all the individual forums, like forumview&id=7.  Is there anyway to isolate just the home forum page, as I don't want the css to affect other pages,or will I need to edit the template?

Thanks!
Back to the top
 
Posted
Rating:
#54722
Avatar

1- That's too hard for me to really answer quickly I'm afraid, it'd need quite a lot of Tempcode writing.

2- We did this as a custom thing on our site:
Attachment
» Download: OCF_TOPIC_POST.tpl (3 Kb, 148 downloads so far)


3- It's the "80" in CATALOGUE_DEFAULT_TAB_WRAP.tpl. We always do column widths using 'col' tags as the CSS to do it gets horrendous.

4- You could probably use the same technique if you put id_running_{$_GET*,id} into your GLOBAL.tpl as I showed you before with zone_running (i.e. as a class). You can then use ".id_running_" in selectors to target the root forum (no ID is passed in if the root forum is being used; for other forums it might be like ".id_running_2", or if the SEF URLs are on like ".id_running_general_chat".
An alternate technique would be to use inline styles in templates with Tempcode, like {+START,IF,{$EQ,{$_GET,id},}} style="padding: 0"{+END}.
This is all a bit complex and could get very fiddy.


Become a fan of ocPortal on Facebook or add me as a friend. Add me on on Twitter.
Was I helpful?
  • If not, please let us know how we can do better (please try and propose any bigger ideas in such a way that they are fundable and scalable).
  • If so, please let others know about ocPortal whenever you see the opportunity.
  • If my reply is too Vulcan or expressed too much in business-strategy terms, and not particularly personal, I apologise. As a company & project maintainer, time is very limited to me, so usually when I write a reply I try and make it generic advice to all readers. I'm also naturally a joined-up thinker, so I always express my thoughts in combined business and technical terms. I recognise not everyone likes that, don't let my Vulcan-thinking stop you enjoying ocPortal on fun personal projects.
  • If my response can inspire a community tutorial, that's a great way of giving back to the project as a user.
Back to the top
 
Posted
Rating:
#54731
Avatar

Honoured member

Great Theme!

very nice indeed.
Back to the top
 
Posted
Rating:
#54733
Avatar

Well-settled

Chris Graham said

1- That's too hard for me to really answer quickly I'm afraid, it'd need quite a lot of Tempcode writing.

2- We did this as a custom thing on our site:
Attachment
» Download: OCF_TOPIC_POST.tpl (3 Kb, 148 downloads so far)


3- It's the "80" in CATALOGUE_DEFAULT_TAB_WRAP.tpl. We always do column widths using 'col' tags as the CSS to do it gets horrendous.

4- You could probably use the same technique if you put id_running_{$_GET*,id} into your GLOBAL.tpl as I showed you before with zone_running (i.e. as a class). You can then use ".id_running_" in selectors to target the root forum (no ID is passed in if the root forum is being used; for other forums it might be like ".id_running_2", or if the SEF URLs are on like ".id_running_general_chat".
An alternate technique would be to use inline styles in templates with Tempcode, like {+START,IF,{$EQ,{$_GET,id},}} style="padding: 0"{+END}.
This is all a bit complex and could get very fiddy.

Hmmmm…. I may be getting out of my depth.  Ah well, only one way to find out!

Quick, Robin, to the Tutorials!

Which tempcode do I need to be looking at for the buttons?  (I think the order is a bit strange, what with report being the first option, and it's really bugging my inner perfectionist.)
Back to the top
 
Posted
Rating:
#54734
Avatar

Well-settled

ocPortal_Noob said

Great Theme!

very nice indeed.

Thanks!
Back to the top
 
Posted
Rating:
#54735
Avatar

What I would probably do personally is use in the button template to put each of certain named buttons in a variable instead of outputting them (so I would need some logic to not output certain named buttons, and other logic to capture those named buttons), then in the post template I would use to get them back in the order I wanted.
But this is programming new code employing trickery, not something straight-forward.


Become a fan of ocPortal on Facebook or add me as a friend. Add me on on Twitter.
Was I helpful?
  • If not, please let us know how we can do better (please try and propose any bigger ideas in such a way that they are fundable and scalable).
  • If so, please let others know about ocPortal whenever you see the opportunity.
  • If my reply is too Vulcan or expressed too much in business-strategy terms, and not particularly personal, I apologise. As a company & project maintainer, time is very limited to me, so usually when I write a reply I try and make it generic advice to all readers. I'm also naturally a joined-up thinker, so I always express my thoughts in combined business and technical terms. I recognise not everyone likes that, don't let my Vulcan-thinking stop you enjoying ocPortal on fun personal projects.
  • If my response can inspire a community tutorial, that's a great way of giving back to the project as a user.
Back to the top
 
Posted
Rating:
#54736
Avatar

Well-settled

Hmmm…. The words non and trivial, come to mind.  As do the words pain and ar$e.

Maybe I'll go back to that damn 'margin collapsing' problem (although I don't think that's it).  My new thought is the table rows are overlapping somehow….
Back to the top
 
Posted
Rating:
#54741
Avatar

Community saint

'Triffic' job!!!

I've crossed the Clifton bridge many times (your banner), so it sort of makes an ex-pat a bit homesick to see that.

Keep going. It might encourage others to follow …

 :thumbs:

Take my advice. I'm not using it!

View my working ocPortal site (version 9.x.x) at Anglo-Indian Portal
Back to the top
 
Posted
Rating:
#54744
Avatar

Community saint

This is a beautiful Theme!

The blue and white are so clean… it just feels fresh and airy.
The clever use of space to hold content is imaginative and promises a great new look for a CMS site.

Thanks for sharing!:thumbs:
Back to the top
 
Posted
Rating:
#54821
Avatar

Community saint

Looks very nice and clean. Love the little heart at the bottom.

I run http://otakuplayground.com and am hopping to make themes and other things for ocportal even though I no longer use it for otakuplayground.com I still love it and feel it could go far with the right help. It needs themes and needs people to advertise for it.
Back to the top
 
There are too many online users to list.
Control functions:

Quick reply   Contract

Your name:
Your message: