Jump to content


Photo
- - - - -

Content Box

content box

  • Please log in to reply
23 replies to this topic

#1 nandorj78

nandorj78

    Advanced Member

  • Members

  • 78 posts
  • Country: Country Flag

Posted 05 April 2013 - 03:37 PM

Is there a way to have different content boxes?

 

I cloned mine hoping to be able to have a different content in the new one, but it simply copied the original one.

 

thanks



#2 Jenny

Jenny

    Advocate

  • Unicorn Store Dev

  • 2924 posts
  • LocationWV
  • Country: Country Flag

Posted 05 April 2013 - 04:47 PM

You should be able to edit individually on the page editor (at the bottom). Will probably say something like "Content Box #1" and "Content Box #2". Also, check the Page Options menu (under PageLines) as well.



#3 mackenzie

mackenzie

    Advocate

  • Members
  • 333 posts
  • Country: Country Flag

Posted 05 April 2013 - 04:47 PM

Hi - what is the url to your site so I can take a look



#4 nandorj78

nandorj78

    Advanced Member

  • Members

  • 78 posts
  • Country: Country Flag

Posted 05 April 2013 - 04:51 PM

Silly me! It was so obvious!

 

Now I have something trickier... How about having a different background colour to each of them?

I managed to change the colour, but I think it'll be the same for all of them. The CSS line I added was:

Please Login or Register to see this Hidden Content



#5 James B

James B

    Advocate

  • Members

  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 05 April 2013 - 11:45 PM

Hi there,

 

When you set up each contentbox you can give each one a custom class. Once you've done that you can use that class to set the css for that content box only. For example if you called it 'mybox'. Use the class .mybox then your css.



#6 nandorj78

nandorj78

    Advanced Member

  • Members

  • 78 posts
  • Country: Country Flag

Posted 06 April 2013 - 01:48 AM

Hi there,

 

When you set up each contentbox you can give each one a custom class. Once you've done that you can use that class to set the css for that content box only. For example if you called it 'mybox'. Use the class .mybox then your css.

So it would look like that, for example: Yes or no?

Please Login or Register to see this Hidden Content



#7 James B

James B

    Advocate

  • Members

  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 06 April 2013 - 01:54 AM

No if you're looking to apply css to the contentbox clone you'll need to use the class of the clone. Like .clone_2

 

In firebug you'll see the class for cloned sections appear in the inspector like this -

Please Login or Register to see this Hidden Content



#8 nandorj78

nandorj78

    Advanced Member

  • Members

  • 78 posts
  • Country: Country Flag

Posted 06 April 2013 - 03:08 PM

Still can't seem to figure this out. :(



#9 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 06 April 2013 - 05:11 PM

Hi, actually, this is easier than it seems.

 

When you go to Dashboard > PageLines > Drag & Drop and apply the Content Box to a template, there's a button on it which allows you to clone it to the same template. When you then go to the post or page using that template you'll see Content Box and then Content Box #2 and so on.  As you'll see in the image below, there's a field to add a class to the box. There, you type some unique term, as James suggested, mybox3 (in my example).


Please Login or Register to see this Hidden Content

 

Please Login or Register to see this Hidden Content

  59.8KB   12 downloads

 

Then, you add CSS to Dashboard > PageLines > Site Options > Custom Code. Here's what I did in my test:

Please Login or Register to see this Hidden Content

And the result is to set the background color to the Content Box as shown in the image below (the grey one matches the example above):

Please Login or Register to see this Hidden Content

 

Please Login or Register to see this Hidden Content

  20KB   11 downloads

 

Note that in my CSS example, I used the class created in the Meta Settings for that cloned Content Box, but added the dot making it .mybox in writing the CSS.  Do not add the dot when creating the class in the settings. It is only used in the CSS code.  To recap, in the Box settings, it's mybox3, but in the custom code, it's .mybox3.

 

Hopefully, this will clear it up for you and help you successfully style your Content Boxes.



#10 nandorj78

nandorj78

    Advanced Member

  • Members

  • 78 posts
  • Country: Country Flag

Posted 06 April 2013 - 09:34 PM

Ok... here is what happened after I treid your suggestion (see attached pictures)

 

What I wanted to do is to have the whole light grey are cloned with a new color.. The suggestion given to me only modified some part inside the light grey area.

 

Well, I hope I have made my self understood

 

Anyway, I appreciate your help very much

 

Thanks

 

 



#11 Danny

Danny

    Is Awesome!

  • Moderators
  • 17600 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 07 April 2013 - 08:12 AM

HI,

 

Not sure where you're getting the following:

 

.contentbox2

 

There is no such class and therefore that could shouldn't work. If you wish to style a cloned section, see my replies to this topic, it should assist you.

 

Please Login or Register to see this Hidden Content



#12 nandorj78

nandorj78

    Advanced Member

  • Members

  • 78 posts
  • Country: Country Flag

Posted 07 April 2013 - 12:38 PM

I added a class to the cloned box (contentbox2)

 

My hope was that its coulor would cover all the light grey area, like the original content box. But it did not. I used dar grey, but it was only  atest color to see if it worked. The issue is, I wand the clone content box to have a different color than the content box (full width speaking).

 

Maybe I'm not explaining myself clearly, sorry for that.



#13 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 07 April 2013 - 01:37 PM

Hi,

 

When creating unique classes for elements, it's important to make sure they're absolutely unique terms.  This is why James and I recommended using something other than contentbox2, as it can create potential conflicts later on. Naming conventions in CSS are important, and avoid confusion.

 

As I understand it, the request was to color the individual content boxes, which we've done. Now, it seems that's not what you wish to recolor, but the background of the section where the content boxes appear. Is this correct? If so, please provide a link to the page where the boxes appear.

 

Thanks for helping us clarify this.



#14 nandorj78

nandorj78

    Advanced Member

  • Members

  • 78 posts
  • Country: Country Flag

Posted 07 April 2013 - 02:30 PM

Hi Rob, I

 

Think you got the point now!

 

The site is blocked at the moment. Can I give you a print screen of the code of the section in question?



#15 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 07 April 2013 - 02:41 PM

A screen shot might help.



#16 nandorj78

nandorj78

    Advanced Member

  • Members

  • 78 posts
  • Country: Country Flag

Posted 07 April 2013 - 02:52 PM

Here it is!



#17 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 07 April 2013 - 02:56 PM

Thanks.  I think the problem is you're focusing on the content boxes, and not on the section where they're placed.  Where did you place the content boxes in Drag & Drop? They don't appear to be in the Content Area. So it's the section where the content boxes are that we have to color, not the content boxes themselves.  If the site were live, I'd be able to see it fairly quick.



#18 nandorj78

nandorj78

    Advanced Member

  • Members

  • 78 posts
  • Country: Country Flag

Posted 07 April 2013 - 02:57 PM

Yes, Page Template (Default) Drag & Drop



#19 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 07 April 2013 - 03:05 PM

Okay, using Firebug for Firefox, or Chrome's Inspection Tool, look at the area outside the content boxes and you'll find this:

#site #page, #site #dynamic-content

 

There may be no background color there as this will probably pick up colors from Dashboard > PageLines > Site Options > Color Control.

 

You can add something like:

background-color: red;

 

Which would make it a red background just for that section.



#20 nandorj78

nandorj78

    Advanced Member

  • Members

  • 78 posts
  • Country: Country Flag

Posted 07 April 2013 - 03:14 PM

It made the entire drag and drop area red!

 

Ok, I give up... I'll let the site be up and running and get back to it with you guys, so that you can see it live.

 

Thanks a lot for the help.







Also tagged with one or more of these keywords: content box