-
Posts
-
I’m making some progress in customizing my site under 2.8.7 and Dragonfly, but it’s taking ages, and is hugely frustrating, largely because I can’t find the right classes to modify to get the colors (or other changes) I want.
I know enough CSS to make the changes but I go through masses of trial and error edits to see what changes because I’m working blind. I’d love to have a guide to the style sheet as it applies to the home page and image pages, but in the interim, some specific questions. Thanks in advance for any help:
DONE: there’s a background-image: none; required to eliminate the dark bar.
1. I want to change the color of the bar across the top of all pages. I’ve managed to change the menu item background, but there’s still a dark gray bar across the entire window width:
http://www.digitalbristles.com/DONE: there’s a background-image used here too – ugly green.Plus you need to cover more button states – .button-success.disabled, .btn-success[disabled]
2. How do I change the green background of my otherwise gray button for Add to Cart. When I hover over it, it’s green. I have changed .btn-success:hover, .btn-success a:hover, .btn-success:focus, .btn-success a:focus, .btn-success:active, .btn-success a:active, .open .dropdown-toggle.btn-success to gray, but still it’s not
http://www.digitalbristles.com/image/girl-jumps-in-the-lake/DONE. I had to edit code to remove
added in functions.php
3. I’ve zapped all the borders, but how do I remove the lines above and below the description under the image? (same link as for 2)4. DONE: More CSS edits. How do I change the gray background behind the huge area under an image with my site avatar and my name – and how to make that box no bigger than the avatar? Everything’s so spread out (same link as for 2)
5. How to I get rid of the icons in front of keywords, categories and similar images? (same link as for 2)
DONE: img-thumbnail and img-responsive
6. How do I change the background color for the image thumbnails? I’ve tried a bunch of classes but as you can see so far no luck
http://www.digitalbristles.com/image-type/cities-places/DONE: By trolling through the objects in the javascript console…
7. Color behind the page numbers in the search results – again, I’ve changed a bunch of classes background color, but those don’t budge (same link as for 6)
DONE: that was .table-striped > tbody > tr:nth-child(odd) > td, .table-striped > tbody > tr:nth-child(odd) > th
8. How do I remove the dark bars in the image sizes (same link as for 2) – I changed to a white background, but all the classes I’ve tried so far haven’t removed the alternate dark backgrounds.I’ve edited this with progress and bolded the parts still to do…
I’m now close – and I can live with the unnecessary icons for a while (although this type of decorative excess drives me nuts) :). I think I’ll just post my Dragonfly CSS in a separate post for anyone else who might want to make mods
You probably already know this, but just in case…
If you are using Google Chrome, you can right-click on an element and then choose “Inspect Element”. This will then bring up another window on the bottom of the screen that will show you all of the CSS elements. You can also make experimental changes (that are not saved) by modifying the items on the right side.
I agree with jsnover. It’s so hard and a constant trial and error to figure out which CSS classes to change.
I’m struggling to find how to align the thumbnails and spread them evenly (with a small border radius) over the entire width of the Latest and Featured Images widget. As seen at http://shazamimages.com or http://clipartillustrations.com .
@shazamimages wrote:
You probably already know this, but just in case…
If you are using Google Chrome, you can right-click on an element and then choose “Inspect Element”. This will then bring up another window on the bottom of the screen that will show you all of the CSS elements. You can also make experimental changes (that are not saved) by modifying the items on the right side.
Thanks. I have been using that and the JavaScript Console and other developer tools trying to inspect parts of the page and get a clue as to what to change. There are still these mystery objects/overrides or whatever that don’t yield to the obvious, although that did help with some of the items I found before I wrote my list
Item 3 in my original list required editing code in functions.php to fix it – IMO it’s just wrong to stick formatting information into the code like that. Am I missing some important reason why this couldn’t be something customized in a style sheet?
The function is symbiostock_sep_content( ) in case anyone else needs to do this and you need to remove the two
insertions.Your issue number 4:
-> WP Admin -> Appearance -> Customize -> Symbiostock Image Page -> Author Container (Background Color)
@redneck wrote:
Your issue number 4:
-> WP Admin -> Appearance -> Customize -> Symbiostock Image Page -> Author Container (Background Color)
Thanks. I had finally changed it there but only after many attempts to modify it via the Appearance-> Editor option to edit the CSS for dragonfly.
I had tracked down the class – .bio-box – and could modify it in the javascript console, but the edits I made to it via the admin panel that’s supposed to let you customize dragonfly didn’t work. I’m guessing they were overridden.
So, I deduce from that: Customize panel changes take precedence over Dragonfly child theme changes.
If that’s the case, then (a) it’d be important to document that, and (b) I hope that’s true for everything in that customize panel, otherwise one could go crazy trying to figure out where to make a change.
This is the CSS file you can edit in the Appearance-> Editor (note: not the Edit CSS from Jetpack but the Symbiostock specific one for Dragonfly)
This is what I’ve used for my site so far – might be helpful to anyone else customizing Dragonfly
Moderator Edit
See Jo Ann’s Latest Post on Next Page which updates this one
viewtopic.php?f=5&t=390&start=15#p10507Beautiful work! There are some that say “Code is Poetry”! You come pretty close!
🙂
I think this is rather catch-as-catch can, but we have to start somewhere; get it working; then we can improve the rhymes!
Actually if I had ONE wish for Symbio-web-masters its they get comfortable with child-theming and css. No joke. If anyone wants to start up a FUN group on that that would be awesome awesome awesome. Symbiostock’s next rung of evolution could actually be you all and not me. Visuals are very very important.
I’ve put a lot of work into the engine, and to some degree into the look, but you guys could really bring Symbio to the next level.
Symbio could be the future – but we need some nice body technicians in the game now: http://www.cuded.com/2011/05/20-amazing-futuristic-cars/
This theme is so beautifully classed out that its hard to find something you can’t specifically alter.
For starters, get familiar here:
Then here:
http://www.webappers.com/2013/09/04/easily-create-your-own-bootstrap-themes-quickly/
Literally, this theme deceives the eyes. You don’t realize its capable of being round, square, shadowed, flat, modern UI… its literally CSS.
Example:
http://www.colorzilla.com/gradient-editor/ <– this alone could create the most beautiful UI elements such as the navbars, headers, etc.
I wish some people could open up a css Symbio-body shop and get busy. It would leave the industry in the dust.
Thanks for the links. It’ll help to know where to start.
I’ll have a look but probably not in the next few days. Assuming I can stop tinkering with the site – it has taken a lot of work to get it back together – I want to upload some more images as I’m less than half way on that.
BTW, there is some part of making things look really polished that will require changing code too – removing formatting stuff from it so it’s only in CSS. For example the two horizontal rules on the image page that I finally found hardcoded in functions.php (having gone crazy thinking there was come border I hadn’t turned off).
Soon I can probably go through a list of “please remove” things such as hr tags. I saw your other post regarding the author page as well.
5. How to I get rid of the icons in front of keywords, categories and similar images?
They are in Symbiostock, CSS, fontawesome (2 files) first time I went though and deleted the ones that I did not want but forgot to save the files. Now I just rename the files so they don’t work.
http://kerioakimaging.com - trying to reopen
http://nail-art-at.kerioak.com - Art and Nail ArtThanks for posting that.
Having looked at the code, and briefly thought about modifying the two fontawesome files to remove just the icons I didn’t want, I think the right thing to do (which I’m not planning to do right away but might at some point) is to modify the various symbiostock php files that write headers with these icons.
The modification would be that you call a function with an icon name as a parameter. There would be a preference for icons on or off and the code that displays all the headings wouldn’t need to know if the icons were to be displayed or not. That would at least centralize icon handling in one place. It would also allow the font files to be there for other uses even though they weren’t cluttering up headlines any more.
I quite like the use of the cart icon in the menu and on the customer download page, but other than that, I would dump the lot. I don’t think they clarify or are visually all that awesome. But to each his own 🙂
For the moment I’m going to learn to live with them
You must be logged in to reply to this topic.