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.


Adding Custom Styles to Comcode Lists

Login / Search

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

Fan in action

Where / How would I add my custom CSS Classes within a page editor to style a list? The following code is what I am trying to accomplish


Code

[list class="subcats"][*][page="site:swiss_screw_machining"]Swiss Screw Machining Services[/page][/*]
[*][page="site:machining"]CNC Machining Services[/page][/*]
[*][page="site:metal-stamping"]Metal Stamping Services[/page][/*]
[*][page="site:wire-edm"]Wire EDM Services[/page][/*]
[*][page="site:tooling"]Tooling Services[/page][/*]
[*][page="site:part-manufacturing"]Manufacturing Services[/page][/*]
[*][page="site:cadcam"]Cad / Cam Services[/page][/*]
[*][page="site:supply_chain_logistics"]Supply Chain Logistics[/page][/*]
[/list]
Back to the top
 
Posted
Rating:
#58669
Avatar

'surround' tag is very helpful…

Code

[surround="foo"]
...
[/surround]

.foo ul {
   ...
}


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:
#58681
Avatar

Fan in action

Confused with the .foo ul tag that you entered. If I am using COMCODE, isn't it required to use comcode list vs ul instead? If I use any standard html tags with the wysiwyg turned off, do I need to also use the semihtml tags around my menu?
Back to the top
 
Posted
Rating:
#58682
Avatar

Fan in action

What else am I doing wrong? I have the css added to the bottom of the global.css but not even the background in my surround div is showing up.

CSS STYLES

Code

/*-----------------------------------------*/
/* SUB CATEGORY THUMBNAIL LISTING */
/*-----------------------------------------*/
.subcats-wrap{width:100%; margin:0 auto;padding:8px;background:#eee;}
.subcats ul {list-style: none;text-align: center;margin: auto;vertical-align: top;}
.subcats li {float: left; list-style: none;}
.subcats li a {display: block;width: 185px;height: 155px;text-align: center;color: #0066FF;padding: 0.3em;text-decoration: none;margin: 0em 2em 3em 0em;border: 1px dotted #FFFFFF;font: bold 90% Arial, Helvetica, sans-serif;cursor: hand;}
.subcats li a:hover {background: #f5f5f5;color: #0033FF;text-decoration: underline;border: 1px dotted #f2f2f2;}
.subcats .subcats li a img {width:175px; height:175px;border:none;}
.subcats h3 {display:block;width: 175px;margin: 0 auto;text-align: center;color: #0033FF;padding: 0em;text-decoration: none;font: 100% Arial, Helvetica, sans-serif;}



Code

[surround="subcats-wrap"]
[semihtml]
<ul class="subcats">
[list]
[*][page="site:machining"][img="equipment capabilities"]http://206.123.100.180/uploads/childcat-images/equipment-capabilities.png[/img][title="3"]CNC Machining Services[/title][/page][/*]
[*][page="site:metal-stamping"][img="equipment capabilities"]http://206.123.100.180/uploads/childcat-images/equipment-capabilities.png[/img][title="3"]Metal Stamping Services[/title][/page][/*]
[*][page="site:wire-edm"][img="equipment capabilities"]http://206.123.100.180/uploads/childcat-images/equipment-capabilities.png[/img][title="3"]Wire EDM Services[/title][/page][/*]
[*][page="site:tooling"][img="equipment capabilities"]http://206.123.100.180/uploads/childcat-images/equipment-capabilities.png[/img][title="3"]Tooling Services[/title][/page][/*]
[*][page="site:part-manufacturing"][img="equipment capabilities"]http://206.123.100.180/uploads/childcat-images/equipment-capabilities.png[/img][title="3"]Manufacturing Services[/title][/page][/*]
[*][page="site:cadcam"][img="equipment capabilities"]http://206.123.100.180/uploads/childcat-images/equipment-capabilities.png[/img][title="3"]Cad / Cam Services[/title][/page][/*]
[*][page="site:supply_chain_logistics"][img="equipment capabilities"]http://206.123.100.180/uploads/childcat-images/equipment-capabilities.png[/img][title="3"]Supply Chain Logistics[/title][/page][/*]
[/list]
</ul>
[/semihtml]
[/surround]




I have also tried:

Code

[surround="subcats-wrap"]
[semihtml]
<ul class="subcats">
<li>[page="site:machining"][img="equipment capabilities"]http://206.123.100.180/uploads/childcat-images/equipment-capabilities.png[/img][title="3"]CNC Machining Services[/title][/page]</li>
<li>[page="site:metal-stamping"][img="equipment capabilities"]http://206.123.100.180/uploads/childcat-images/equipment-capabilities.png[/img][title="3"]Metal Stamping Services[/title][/page]</li>
<li>[page="site:wire-edm"][img="equipment capabilities"]http://206.123.100.180/uploads/childcat-images/equipment-capabilities.png[/img][title="3"]Wire EDM Services[/title][/page]</li>
<li>[page="site:tooling"][img="equipment capabilities"]http://206.123.100.180/uploads/childcat-images/equipment-capabilities.png[/img][title="3"]Tooling Services[/title][/page]</li>
<li>[page="site:part-manufacturing"][img="equipment capabilities"]http://206.123.100.180/uploads/childcat-images/equipment-capabilities.png[/img][title="3"]Manufacturing Services[/title][/page]</li>
<li>[page="site:cadcam"][img="equipment capabilities"]http://206.123.100.180/uploads/childcat-images/equipment-capabilities.png[/img][title="3"]Cad / Cam Services[/title][/page]</li>
<li>[page="site:supply_chain_logistics"][img="equipment capabilities"]http://206.123.100.180/uploads/childcat-images/equipment-capabilities.png[/img][title="3"]Supply Chain Logistics[/title][/page]</li>
</ul>
[/semihtml]
[/surround]

Back to the top
 
Posted
Rating:
#58683
Avatar

Fan in action

and tried to simplify code and styles. The page does not seem to be recognizing my css styles, at all.

CSS

Code

.subcats2 {float:left;display:block;width:175px;height:205px;margin: 2em;text-align:center;}
.subcats2 a{color:#0033ff;text-decoration:none;}
.subcats2 a:hover{color:#0066ff;text-decoration:underline;}

CODE

Code

[semihtml]

[surround="subcats2"][page="site:machining"][img="equipment capabilities"]http://206.123.100.180/uploads/childcat-images/equipment-capabilities.png[/img][title="3"]CNC Machining Services[/title][/page][/surround]
[surround="subcats2"][page="site:metal-stamping"][img="equipment capabilities"]http://206.123.100.180/uploads/childcat-images/equipment-capabilities.png[/img][title="3"]Metal Stamping Services[/title][/page][/surround]
[surround="subcats2"][page="site:wire-edm"][img="equipment capabilities"]http://206.123.100.180/uploads/childcat-images/equipment-capabilities.png[/img][title="3"]Wire EDM Services[/title][/page][/surround]
[surround="subcats2"][page="site:tooling"][img="equipment capabilities"]http://206.123.100.180/uploads/childcat-images/equipment-capabilities.png[/img][title="3"]Tooling Services[/title][/page][/surround]
[surround="subcats2"][page="site:part-manufacturing"][img="equipment capabilities"]http://206.123.100.180/uploads/childcat-images/equipment-capabilities.png[/img][title="3"]Manufacturing Services[/title][/page][/surround]
[surround="subcats2"][page="site:cadcam"][img="equipment capabilities"]http://206.123.100.180/uploads/childcat-images/equipment-capabilities.png[/img][title="3"]Cad / Cam Services[/title][/page][/surround]
[surround="subcats2"][page="site:supply_chain_logistics"][img="equipment capabilities"]http://206.123.100.180/uploads/childcat-images/equipment-capabilities.png[/img][title="3"]Supply Chain Logistics[/title][/page][/surround]

[/semihtml]
Back to the top
 
Posted
Rating:
#58684
Avatar

I'd use Firebug to inspect and confirm the classes are applying and the properties are in whatever CSS loads.


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:
#58686
Avatar

Fan in action

I added #global_middle_ph before each of my subcat styles and it solved my style sheet being recognized issue.

I was also using semihtml where html was more appropriate for my original menu code. Once I get it working 100% for client purposes, I will return to convert all to comcode to satisfy my coding desire to do it correctly.

I appreciate your help, Chris!

The result to getChild Images working was:

CSS

Code

/*-----------------------------------------*/
/* SUB CATEGORY THUMBNAIL LISTING */
/*-----------------------------------------*/
#global_middle_ph .subcats-wrap {width:625px; margin:1em auto;padding:0;background:#eee;}
#global_middle_ph .subcats ul {list-style: none;text-align: center;margin: 0 auto;vertical-align: top;}
#global_middle_ph .subcats li {float: left; list-style: none;}
#global_middle_ph .subcats li a {display: block;width: 175px;height: 195px;text-align: center;color: #0066FF;text-decoration: none;margin: 0 1em 2em 0;border: 1px dotted #FFFFFF;font: bold 95% Arial, Helvetica, sans-serif;cursor: hand;}
#global_middle_ph .subcats li a:hover {background: #f5f5f5;color: #0033FF;text-decoration: underline;border: 1px dotted #f2f2f2;}
#global_middle_ph .subcats .subcats img {width:175px; height:175px;border:none;}
#global_middle_ph .subcats h3 {display:block;width: 175px;margin: .2em auto;text-align: center;color: #0033FF;padding: 0;text-decoration: none;font: 100% Arial, Helvetica, sans-serif;}


Code

[html]
<div class="subcats-wrap">
<ul class="subcats">
<li><a href="/site/pg/cnc-swiss-turning"><img src="uploads/childcat-images/cnc-swiss-turning.png" alt="CNC Swiss Turning"><h3>CNC Swiss Turning</h3></a></li>
<li><a href="/site/pg/cnc-turning" title><img src="uploads/childcat-images/cnc-turning.png" alt="CNC Turning"><h3>CNC Turning</h3></a></li>
<li><a href="/site/pg/cnc-milling"><img src="uploads/childcat-images/cnc-milling.png" alt="CNC Milling"><h3>CNC Milling</h3></a></li>
<li><a href="/site/pg/precision-automatic-screw-machines"><img src="uploads/childcat-images/automatic-screw-machines.png" alt="Automatic Screw Machines"><h3>Automatic Screw Machines</h3></a></li>
</ul>
</div>
[/html]

Back to the top
 
There are too many online users to list.
Control functions:

Quick reply   Contract

Your name:
Your message: