I'm working in Drupal, got CKEditor set up and have the tables plugin going on. The design I'm working with requires some visual elements that would be made A LOT easier if I had a div with a class wrapped around the tables in the output (because tables can't have padding on their sides in IE)...
SO.. I'm can think of 2 ways to do it, but don't know and can't figure out how to do either:
1)Use CKEditor to wrap all table elemnts in a div with a class..
2)Use Drupal input filter to wrap all table elements in a div with a class..
Does anyone know how to do either?
I don't want to add the div on page load.. that would cause a jump, and depend on javascript for the output.
This seems promising: How to find and replace text in CKEditor using Javascript? but is it reliable? It seems kinda hackish and if a non-dev type is going be using the Editor it has to be 100% foolproof..
thanks!
Related
I prefer OneUI V3.0.2 to 2.0 except for one element, which is paging. I think the new style looks horrible.
Here is an example of the old paging style:
And here is an example of the new styling:
I would like to replace the new styling with the old, but just for this one element, or at least to create my own style for paging.
I have looked at the OneUI documentation, but there is something that I don't understand. I am using a dataView in my layout, but when I go to look at how things are implemented, it always seems that they are using raw html, so there is a table element in there. I don't understand that. I want to know how to style a custom control, not html.
Any help would be greatly appreciated.
Styling is done by your browsers rendering engine. It applies CSS to HTML. That's how it works. So you need to create some CSS with !important to fix it.
Easiest way to figure it out: load the page, use FF or Chrome Dev tools that allow you to live edit the CSS and see the result instantly. Once you have it, copy to a CSS file and add to your project.
Comparing to a V2 page makes it easier to figure out.
Just reading the CSS source is rather a pain. The Dev tools rock
The following website's theme, http://174.132.194.251/~taninew/ is driving me crazy. I've always been able to use the css code for word wrapping and line wrapping in the past, but now it seems that my menu items wrap in two or even three lines.
How to fix that?
You'll want to make the menu items responsive, or just reduce width and padding on the menu list
Here's a tricky one: has anybody seen a YUI dialog/panel implementation with nice OS X style shadows around the dialog, instead of the blocky shadow that is implemented by default with the "underlay" element?
You can see this type of shadow on Amazon.com popup windows. It requires quite a bit of PNGs but looks very nice.
I'm thinking of inserting extra DIVs or replacing the .underlay element, and hook into the dialog size event to adapt the dimensions. The latter would be required because YUI uses some CSS trickery to make the underlay element "snap" to the dialog dimensions with CSS only in modern browsers, and uses a manual dimension update for IE.
EDIT: Just checked YUI 3. The Panel widget is not available yet, only the Container and it's still beta. So I'm looking at solving this in YUI 2.
PS: Oh I guess I could include the PNG shadow as part of the Panel's header, body and footer (hd, bd, ft), as an extra padding. And use a css rule to hide YUI's underlay. Hmmmmmm I just wish I didn't have to do this because it changes calculations for the draggable area, it's not a great way to do it.
For the main menu, I want the first four links to be blue, and specifically the last four links to be yellow. There will only be eight menu items.
I was thinking of hard coding the yellow links into the menu div, and that way when the page loads the first four menu items (default colour blue) they will be blue, and then my hard-coded links of yellow would load up.
My question is, where can I add the "yellow" code? Where can I hard code my yellow menu items? Or is there a different, better, approach to this?
My first question would be which men u are you implementing? A lot of them have a menuitem_x sort of id that is applied to the menu markup so with the CSS you can do what you want
As for where to place the markup there are a few places
You can do it directly in the skin files (not suggested since you may have to edit a few files)
in the skin .css files (much better place to do it and more maintainable and portable)
in the admin go to Site Settings and use the stylesheet editor to add the classes to the portal stylesheet (better than #1 but not as good as #2 since its now specific to the portal and not the skin so it wont be as portable)
Number 3 - works good if you dont have access to the skin or dont want to change it for other reasons
You could use Javascript within the skin.
We have done simular in the past for DNN menus but i keep away from the skinning side so dont have any examples, sorry.
Google does though :)
I would use one of the specific SEO friendly DNN menu modules that generate clean code that can be followed by search engines. I usually use one of them, except for projects where I don't have SEO concerns. When you have a menu with clean markup, like a list, you can change the colors using jQuery and specifying the first four items. You can probably do it like this, one by one. There may be a better selector for grabbing the first four items which is something I have never used.
Solved it, not as dynamic as I'd like, but it works.
The way I've done it is I'm playing with id tags, rather than class tags. Using ID, I can pick out the individual menu items and apply CSS to them.
Essentially, it looks like I've done what 'codemypantsoff' suggested. Thanks!
I'm looking to see if it's possible to implement a "bar" like you guys have, along with Digg, Stumble upon and other websites.
I have no idea what it's even called - frameset, iframe of sorts but I can't even think of a proper title to search google..
Can you help?
You can have a normal div tag (or whatever tag you want to use) with CSS position property set to 'fixed'. Then the element can be positioned where ever you want and scrolling the page doesn't affect the position.