When I'm editing content in ckeditor, it looks great with all the styling applied. For example, code snippet looks like:
and blockquote looks like:
But when django template(content) is rendered it doesn't preserve any of the styling.
Code snippets becomes :
and blockquote becomes :
You need to make sure that the styles in CKEditor are also available in your site's CSS files. See contents.css in CKEditor's main folder and adjust both it, and/or your site's CSS, to match each other.
Related
A client is using Sitecore 9 - we are not Sitecore developers.
We've been asked a simple thing: add social media links to the Footer of their Sitecore site.
Its proving more difficult than expected.
I've added the links on other pages by editing the HTML directly via the WYSWIG editor.
But the Footer appears more restricted, only accepting the addition of templates like 'Link'.
The 'Link' template has an option to add an external URL but doesn't have an option to add an image.
The CMS looks like this:
Is there any way to add a link, with an image, via the CMS (without the need to write Sitecore code), so the page chnages from this:
to this:
If you dont want to write Sitecore code, maybe you should think about using frontend.
Find the views that holds the footer (probably Foundation/Footer.cshtml) or something like that.
-To easily find where it is, follow these steps
Go to a content page Presentation Details that has footer (probably any)
Go to Controls
Find the footer rendering in there
Click on it
Grab the Datasource's value
Go to the Datasource's path
There should be a field holding the value of the view.
Add some css class on the div that holds those items, and do your frontend stuff in there...
It is not a scalable solution, so I would highly recommend updating the Footer rendering by adding new fields and adapting the model/view. So that way a content editor could easily add a new value for each socials.
Is there any way to change the Django CMS admin logo? I tried many things to change the logo of Django cms admin but unable to. Can anyone help me?
You could copy, modify and then include this template file in your project in the folder: your-project/templates/cms/toolbar/items
https://github.com/divio/django-cms/blob/develop/cms/templates/cms/toolbar/items/logo.html
You need to keep the css class cms-toolbar-item-logo because the JS binds to that logo and may error without it.
You can then add override the css rule for the icon by changing the content, you may need to rewrite this altogether by setting the content as empty and adding a background image:
.cms-icon-logo:before {
content:"\E02D"
}
I am using a theme called Hemingway, it's a great theme with three page layouts. (full-width, with sidebar, without sidebar). This is all working great. I can choose one of three options in page settings.
I'm also using the Projects plugin by Woothemes. This plugin makes it easy to add recent projects with a photo gallery and some other options. It's working when I'm using the shortcode:
[projects limit="12" columns="2" orderby="date" order="desc" exclude_categories=""]
I'm using this shortcode with two columns on a full-width template. This is working great, but when I'm trying to use the functionality to automatically add the content of projects to the page using the option built-in Projects:
The full-width template is not working and the sidebar is shown. Also the two column layout for projects is not working. They just aligned beneath eachother.
How it should look like (this example is with shortcodes):
http://hoveniersbedrijfameland.nl/projecten/
How it looks with the option in projects to choose a page: (this is wrong)
http://hoveniersbedrijfameland.nl/projects/
How can I debug this to see what breaks it?
What I tried so far:
I've tried the plugin to behave like I want. This means, that the
plugin will use the full page template for 'categories' instead of
using the archive page. I don't really know how the plugin is build,
so it's hard to eit the right file.
I've tried a workaround with url routing, but this isn't the best
approach.
I found a solution. I copied the archive-project.php file to my theme and edited the content with the ones in the full-width template. I need to style it myself because the pages are broken if I leave it like that.
If I want to edit page template now, I need to code it in the ffile instead of choosing it from the pages > page layout in the admin panel.
I'll fix that later.
FINAL UPDATE: I hardcoded everything and it's working for me now. I don't need any further help, I'm now looking into the custom post types to change the content template.
The template is here:
http://foundation.zurb.com/page-templates4/marketing.html
I downloaded this template and one by one downloaded foundation.css, normalize.css and the custom.modernizr,js
The top bar seems to work fine.
I ran updates on the zurb-foundation and compass gems and created a new compass project.
Now when I take that working template and move it into the fresh compass project, update all the paths and change the linked stylesheet from foundation.css to app.css, the dropdowns no longer work on the expanded top-bar.
I have made no edits to any scss or css code. The only edit is changing the link from foundation.css to app.css. These should be the same right?
My workaround is to include both foundation.css and app.css, but this seems like a lot of unnecessary duplication - and it's making it very difficult to tweak the styling.
The files can be viewed at:
http://www.t4dev.com.php53-3.dfw1-2.websitetestlink.com/transparency/
Your should use the right markup or the js won't work.
Look at the docs http://foundation.zurb.com/docs/components/top-bar.html and use the sample markup to test if it works.
The template you showed uses a valid markup for the top bar.
Hope that helps :)
How these application allow users to upload their own templates? How is this possible?
Do they have some kind of a their own template engine or..?
Tumblr gives you two options to include your own theme:
If it is just for personal use: by changing the html of the theme. If you go to your tumblr-website and click on the customize button, you can edit the html. In the header file the content of your .css must be pasted between the <style type="text/css"> </style> tags. And you can add some javascript there. For the html I suggest to read the manual that Mirko Adari suggested: Tumblr Theme manual
If you want it to be a theme on itself: submit your theme to the Theme Garden: Tumblr Theme Garden
Blogger is a bit more rigid. Also there you can change your html file. Keep in mind that it's markup for posts is different then Tumblr. Also custom CSS files can be added (more information on that). If you are less familiar with css and html Blogger offers some buttons so that you can change the basics to your own needs. Blogger also offers a way to backup and restore your theme. A more detailed explanation can be found here. This template file must be an .xml file. More information on the markup of this xml-template can be found here.