I am currently making a design where a CKeditor is managing the content in a 960px wide container. Well the content inside that box is in two columns, which is just two divs, that is styled with div:first-child and div:nth-child(2) .. What I want is to make the CKeditor have these to div's pr. default and have them styled as in my frontend design - is that possible??
You can either edit /contents.css to reflect the final look within the editor, or load in a different CSS file for editors using CKEDITOR.config.contentsCss = '/path/to/editors.css';. Default content is probably easier to implement as part of the CMS you're using.
Related
I have a question about Custom CSS or using a coding block when uploading an image to a page as a logo. I am using squarespace for my website and I need help coding my logo so that it fits on every page. An option is to use Custom CSS or a coding block. I am using the Rally template for Squarespace and my logo has a max capacity unfortunately. What coding do I use to have my logo on each page? My site is www.goodemoments.com. Please help, I would like to officially launch my blog very soon!!
Typically, in Squarespace, the way to put your logo on every page is to use it in the header. That is true for the Rally template as well.
To do this:
Add your logo via edit mode by going to Design > Logo & Title >
Logo Image
Save
The logo will now be used in place of your title ("Goode Moments
| Lifestyle Blog")
Go to the Style Editor: Design > Style Editor
Under "HEADER: BRANDING", adjust the "Logo Width" parameter to
your liking.
Once you've done this, it may then make sense to add some custom CSS via the CSS Editor if some additional minor tweaking is needed.
Yes, so I would like to use Custom CSS, because my logo that I will be using is to small. The width only goes to a certain size and I want it to be larger.
There is a lot of stuff out there on making BS3 non responsive but it all seems to focus on LESS variables. I'm using static CSS though.
http://getbootstrap.com/examples/non-responsive/
http://bigwilliam.com/turn-off-responsive-behavior-for-bootstrap-3/
Steps 1 (remove viewport) and 2 (static container width) are easy enough. But how do I set the media query breakpoints in CSS?
There's an option in Bootstrap to customize your download of Bootstrap CSS to fit your needs. If you press the link customize along Bootstrap's website, it will take you to a page that lists all the components and utilities that come included with the default download of Bootstrap CSS. You can add/remove any of these items to create a version of bootstrap that fits your particular needs.
For you case, remove the following options (Under Common CSS):
Print Media Styles
Responsive Utilities
There is also a section where you can customize and compile the LESS variables into a custom .css file. The one you could consider changing is the Media Query Breakpoints settings, but there are lots of customization options for you to browse through.
Take a look here at Bootstrap/Customize to see all the options you can change, and hopefully that will help!
set minimal width to html or body element, in that way page won't resize if browser width is less than min-width specified. but whole point using bootstrap is to easily develop responsive websites, so you are doing something terribly wrong if you want not responsive bootstrap.
html { min-width: 1000px; }
Which is the best way to convert/change an existing drupal site to a responsive pattern? I have searched lot, but not getting any right direction or guideline. My current site is running with drupal 7 and zen theme. Do I need to change the theme to responsive one like bootstrap or there have any other better solution.
I think you got the answer in your question! I used the Bootstrap theme for Drupal to make my websites responsive. It works perfectly. You can find it here:
Bootstrap project for Drupal
The theme is shipped with sub-theme starter kit you can use to pimp your own theme safely.
You don't convert the Drupal site but the HTML output, to responsive.
How the HTMl is generated (the Drupal theme) is not relevant.
Regardless of what theme you are using, something that I found useful is just open your website in Chrome, and using Developer tools, I add media queries as required to a new CSS, fixing only what looks too cluttered or small in the simulated device.
Some steps include:
Add a new folder to workspace (Sources tab)
Add a local (initially empty) css link to the drupal header (to work with the actual site, or you'll have to take the task to generate an off-line version of your site, fixing all the links to point to your local computer, or to setup that theme in a local server, as MAMP)
replace all the WIDTHs from container that prevent the site to be reduced with the browser's viewport (as you reduce the window size) with MAX-WIDTHs (same value), and set a new WIDTH to 100%. Now your design will be flexible under the original width.
hide, float, or change the position of divs to flow nicer with the new viewport width.
A trick I use a lot with big marketing elements (not article content with lots of text) is to make them elastic, so they look always the same relatively to the viewport. To accomplish that: re-define font-sizes AND all dimensions in em. Then and add "font-size: 1vw;" to the first parent that can be proportional to the viewport's width or matches the full viewport, and when your viewport resizes, all the elements will scale as well.
setup a few classes as .mobile-hidden or .desktop-only to hide/show redundant elements in mobile view.
(Obvious) make texts bigger and add give enough padding to small elements to be easily touchable.
Then just upload your CSS to the theme and change the url in the link you created before in the header.
Voilá: responsive theme.
Note: Keep in mind many scripts these days modify the DOM and new elements might need to be styled later, once you run some cart, or functionality which generates/changes elements and their styles.
Good luck.
I am now having a lot of troubles with Bootstrap. I used to use it to build a website once and then I have never used it again. But now, I have to use it. I downloaded the compressed version and include JS and CSS file in my project.
Here is the problem. I don't know how to customize it effective. For example, I create a navbar that is much higher (height:90px;) than the bootstrap default navbar. Hence, I have to modify the padding of the navigation panel on the navbar and when the navbar is collapsed, the items in this collapsible navbar are aligned incorrectly due to the padding and margin modification for the large screen.
I have one solution in my mind. May be I have to modify the media query padding and margin or if you have other effective ways to do it. Please tell me.
Create a file with overrides that you load after the bootstrap file. The override file will redefine the bootstrap classes you want to change. It's important that you load the override file after the bootstrap file.
Just linking Your own CSS file, and insert your custom class to the element. And then styling your custom class & avoid to override default class provided by bootstrap itself. This is my practice when using bootstrap or another CSS Framework.
Never have problem so far. Good luck for your project.
I'm using the Bootstrap framework for a web application. The responsive design works very well for the primary part of our site which needs to work on smaller screens. However, there's an admin section where the responsiveness is both not that necessary (will be administered on desktops) and gets in the way (the forms/tables require tweaking to work at smaller sizes).
Is there an easy, scalable way to turn off bootstrap responsiveness for certain pages?
Right now, we have a single bootstrap .css file with the #sizing elements included. I could separate out boostrap.css and bootstrap-responsive.css and then only call responsive on pages that need it. I presume that would work, but would mean yet another setting (it's a cakePHP app).
Ideally, I'd like to assign a class to the body or main container that would override the responsiveness -- <div class="container non-responsive">
One other note -- I'm really only concerned about the responsiveness below 1024px in this case. The way it expands in larger screen sizes works well in the admin section.
Separating them will be easier even though it's another setting. When you download Bootstrap from their home page (http://twitter.github.io/bootstrap/, instead of via their Customize page or via the GitHub project) it already separates the responsive styles into a separate file.
However, you can add your own styles that are more specific than each of the responsive styles in Bootstrap and override them. It could get hairy though because you'd basically have to repeat everything in bootstrap-responsive.css and override manually for each style property specified by Bootstrap's responsive file.
A better approach might be to edit bootstrap-responsive.css and prefix each style within the media query with ".responsive " and add the "responsive" class to the body element of the pages that you DO want to be responsive.
Hope this helps.