Can't add or style elements of main content #736
Comments
|
I also have a problem with the style of sidebar widgets, footer widgets. I don't know if I have a clean installation but the default page templates work fine (front, kitchen sink etc). Does the content area have no style by default, same with widgets? Am I missing something? |
|
When you say main content area of the page, do you mean in the content editor inside Wordpress? |
|
@nitrokevin yes sir :) |
|
What directory were you in when you ran |
|
Main directory, is there a file to edit the style of content area? like On Friday, 26 February 2016, Chuck notifications@github.com wrote:
|
|
Styling takes place in the assets/scss folder. Most things can be changed in the /assets/scss/global/_settings.scss file. |
|
Thanks for the quick reply.. So how do we add the components like the orbit for example? Do I have to copy and paste the code from the kitchen sink? Am I doing it right? or there are shortcodes of any kind. |
|
That should work. Lines 381-422 in page-templates/kitchen-sink.php is for Orbit. |
|
Yes it is working, the orbit is moving its content.. The design of On Friday, 26 February 2016, Chuck notifications@github.com wrote:
|
|
The styling for Orbit is in the /assets/scss/global/_settings.scss on line 390. |
|
Doesn't the default style work like the demo page? After I installed the theme the style works fine for demo pages. But not in the content area so I doubt if I have a clean installation. That's what I need to confirm before messing with the design. For example the orbit's bullets in my content area are vertical while in the demo they are horizontal. But they are clickable and working fine. |
|
Here is the styling used on the demo pages. /assets/scss/templates |
|
In the Readme file for this repo, he lists which files are used for styling. Here |
|
Didn't realize you edited the above post. You could open your page and the kitchen sink page in different tabs of your browser. Then inspect elements (such as the orbit buttons), compare the differences and make changes accordingly. |
|
Oh, so I have a clean installation? and I just have to edit the style so it won't be messy? |
|
Yep, that's the idea behind a starter theme. Style it how you want it to look. |
|
I think you are saying there is no styling, can you share a screen shot |
|
Ok here's the screenshots, they are both on the same page (with kitchen-sink page template), on top of the page there's a working orbit with a nice default style of foundation. And at the bottom there's my ugly orbit and (custom menu) widget.
|
|
I'm guessing that the problem is you're trying to do this from the content editor, which may be adding I wouldn't recommend putting components that involve a lot of markup through the content editor. It can be a nightmare to deal with. Can you hardcode the Orbit slider into the page template instead? If the client needs to change the images you can make a "theme options" page where they can select the images in the slider. |
|
Yes that's what I'm doing.. I just want to know how to add To simplify my questions, I ran npm install and I got a lot of warnings.. If not then why my components have different result from the demo? I have On Friday, 26 February 2016, Colin Marshall notifications@github.com
|
|
Warnings are usually fine when it comes to Like I said, your problem is that you're not going to have consistent results if you put components with a lot of markup in the content editor. Shortcodes are one route, but I'm not sure what's out there for Foundation 6. We're working on shortcodes for FoundationPress, but haven't gotten around to Orbit shortcodes yet. The other route is to put the code in a page template, which is pretty simple and easy, but you'll need to add theme options if you want the client to be able to change images in the slider through the dashboard without having to touch code. |
|
If you search Wordpress plugins there is one for foundation shortcodes not sure how upto date it is but you could try it Sent from my iPhone
|
|
I would suggest that you use Advanced Custom Fields (ACF), which is a lifesaver plugin which I believe is essential for all WP theme development. With ACF you can easily add a carousel widget to your templates and let editors drag and drop images, captions and whatnot, without having to deal with short codes or even worse, code. You will need the core ACF plugin, the repeater field add-on and some very basic coding knowledge to get this to work. |
|
Hi ole, I haven't had the chance to close it.. I still don't have an idea On Monday, 7 March 2016, Ole Fredrik Lie notifications@github.com wrote:
|
|
I haven't touched it again either, but I will definitely use it, thumbs up On Monday, 7 March 2016, miko anahaw mikoanahaw@gmail.com wrote:
|
|
Hi, There are several ways to add content areas containing the Foundation UI components. As I said, I would recommend checking out ACF. I've read this thread a couple of times, and it' s still not clear to me what the issue is. If you believe you've found a bug in FoundationPress, please file a new issue and follow the guidelines in the new issue template. If you have general questions that are not related to a bug, please use the Gitter chat or Foundation forum. |
|
got it thanks On Monday, 7 March 2016, Ole Fredrik Lie notifications@github.com wrote:
|
Hello, I had set it up and run npm install, I need to know how to add elements like in the kitchen-sink page to the content area of a page. I added the code from kitchen-sink.php to a wordpress page but it was not working as expected (I don't really have any idea how to implement this properly). Well, the motionUI works but it doesn't inherit the style from the kitchen sink. I used the kitchen-sink template but only the default elements are working. Thanks!
The text was updated successfully, but these errors were encountered: