I am currently working on customizing the welcome page for my Bigcartel site.
I am using the Neat theme and would like to remove the grid filter that appears over the slideshow image1 to appear clean image2
I was wondering if it's possible in Big Cartel and what was the process to follow?
To remove the grid, you'll need to drop the following code into the bottom of the CSS section in your Customize Design area:
.slideshow div.featured_holder {
background: none;
}
add this in your css
.slideshow .featured_holder {
background-image:none
}
Related
Good Morning.
I would like help with the TinyMCE editor that I am trying to integrate into my blog.
[I would like to remind you that I'm a beginner]
The problem I've been encountering is when viewing the blog on cell phones, as the images don't fit the screen, breaking the view.
view of the problem -
At the bottom, in gray, would be the page border.
In the search for solutions, I found this (but as you can see, it didn't solve the problem)
In tinymce.init:
image_dimensions: false,
image_class_list: [
{title: 'Responsive', value: 'img-responsive'}
]
can anybody help me?
it looks like this is your first post? Welcome!
My assumption is that the img-responsive CSS class isn't setup on your site properly. You probably need to setup the class on your site similar to:
.img-responsive {
width: 100%;
}
Please have a look at this Codepen as an example. You can change the width of small-element in the CSS and the image will be responsive.
Alternatively, when you insert the image in TinyMCE, you can specify the image width as 100%.
I tried to adjust the img-responsive properties, but I have a bootstrap theme and I'm not sure where it is adjusting those properties.
After a more cautious review of the documentation, I was able to "resolve" this problem as follows:
In tinymce.init({...
style_formats: [
{title: 'Imagem responsiva', selector: 'img', styles: {
'width' : '100%',
'height': '100%'
}
}
]
This created an option for formatting to be applied.
Solution I got.
That way I was able to have responsive images without breaking the page layout when viewed on mobile devices.
Thanks to anyone who can help.
Using ckeditor in Drupal 8. The dropdown menu itself is too small and short and the type inside is too large. How can I actually change the formatting of the Styles dropdown menu itself?
I'm not sure if you need to do anything special inside Drupal 8 however from CKEditor point of view you need to change CSS classes responsible for dropdowns.
Below are classess used by dropdowns in CKEditor 4.x for default skin.
Dropdown buttons on toolbar:
.cke_combo__font .cke_combo_text
.cke_combo__fontsize .cke_combo_text
.cke_combo__format .cke_combo_text
.cke_combo__style .cke_combo_text
Dropdown panels:
.cke_combopanel__font
.cke_combopanel__fontsize
.cke_combopanel__format
.cke_combopanel__styles
To resize editor droprown button and panel for e.g. Format, please add the following rules in your page CSS file:
.cke_combo__format .cke_combo_text{
width:150px !important;
}
.cke_combopanel__format {
width:250px !important;
}
Since Toolbar is a part of main page, these rules can be included in head section of your HTML page, can be put in external CSS file which is then imported to your HTML page (with the help of link tag) or can be added in editor CSS skin files directly e.g. in editor.css although that last method will be problematic in case of editor upgrades so I don't recommend it.
Drupal 8 / 9: You can define a stylesheet for CKEditor in your (Admin-)Theme to override the appearance of the editor.
First add a new CSS-file (e.g. css/ckeditor-override.css) to your admin-theme.
Add the following line to your admin-(sub)theme's info-file (e.g. myadmintheme.info.yml):
ckeditor_stylesheets:
- css/ckeditor-override.css
Then you can change the appearance of the editors – see hints of j.swiderski answer – for example:
.cke_combopanel {
width:200px !important;
}
.cke_panel_list .mystyle {
font-size: 1em !important;
}
If your stylings do not work, have a look into your theme: Maybe it styles the editor, too, and overrides your stylings?
Some themes – like "Gin" – make it easy and provide a css-file for custom overrides. Then simply put your style-overrides for the editor there.
If you don't want to create a subtheme you can try Asset Injector-Module.
I have created a .jsf page containing one panel tabbed component. The outcome is attached .
Could anyone please tell me how to customise the panel tabbed to get the following structure? i need to increase the width of show detail items in the tabbed layout(Only the headers are needed))
You'll need to use CSS to customize the look-and-feel of your page.
You could do this by either using the style property or you could build an ADF skin.
See Oracle's documentation:
http://docs.oracle.com/cd/E16764_01/web.1111/b31973/af_skin.htm
I assume you know how to create ADF Skin. You can use this css to increase tabWidth of panelTabbed
af|panelTabbed::tab-content {
width: 200px;
}
I'm using the telerik TreeView.
I wonder if there is a way to change the dotted line used in the TreeView to a line that is not dotted(by uploading a background image file,or if telerik a have another solution.
http://demos.telerik.com/aspnet-mvc/treeview/draganddrop?theme=default
Based on your Theme please update below highlighted (three) images.
If you used CDN URL then please create this three images and add into your project.
Then copy all the css class which was used this three images.
Then update the image source and add "!important" in the style property.
Code from Original CSS File (ehich was used 'treeview-nodes.png' image)
.t-treeview-lines .t-top,.t-treeview-lines .t-mid,.t-treeview-lines .t-bot{background-image:url('Default/treeview-nodes.png')}
Updated CSS code
.t-treeview-lines .t-top,.t-treeview-lines .t-mid,.t-treeview-lines .t-bot{background-image:url('YourNewPathComesHere') !important;}
I use Tumblr as my website for my band. I'm working on the discography page and I'm trying to put album artwork into a page at a 240px by 240px ratio, but it's stretching and I'm not entirely sure how to stop it from doing that.
Link to page
Any help would be greatly appreciated. Thanks.
Go to your blog customize page. It should look like this: tumblr customization panel http://img109.imageshack.us/img109/803/0a8e2d3f8a7e402ca707c5c.png
Find field “Add custom CSS” and paste in it this code: #entry img { width: auto; }