How to see child theme css options in WP edit page dashboard?

  • raindance

    #1871

    If I’ve got say “subheadinglinks” as a style in my child theme css file, how can I see them in the tinymce editor in the dashboard when I’m building/editing a page in WP? I want to be able to apply styles from that file to the page I’m building, sort of like you would in Dreamweaver. I see in the format drop down there is headings etc, but is there a way to easily apply my styles rather than having to do it in the html code itself?

    raindance

    #17233

    Ok I’m stumped…

    http://juicytravels.com/best-air-travel-sites/cool-flight-tracker-sites/

    I made a new style in my child theme css:

    }
    .subheadinglinks {
    font-family: Georgia, "Times New Roman", Times, serif;
    color: #993399;
    font-size: 14px;
    font-weight: normal;
    text-decoration: none;
    }
    .subheadinglinks:hover {
    font-family: Arial, Helvetica, sans-serif;
    color: #0099CC;
    font-size: 18px;
    font-style: normal;
    font-weight: bold;
    text-decoration: none;
    }

    Then in the page html itself I’ve got:

    <div><a class="subheadinglinks" title="Flightstats.com Flight Tracker" href="http://www.flightstats.com/go/FlightTracker/flightTracker.do" target="_blank">Flight Tracker at FlightStats.com</a>
    Shows the flight path on a Google Map of a particular flight. A fun, visual way to watch someone's flight. Search by flight, airport or route. Bonus feature is that it shows you airport delays and weather of the arrival airport. I've found this service to be more accurate than those which give you "from the air" data as it doesn't take into account gate delays and other possible airport hang ups. You can also register for free and receive flight status alerts by email or text.</div>

    So why on the page itelf:

    http://juicytravels.com/best-air-travel-sites/cool-flight-tracker-sites/

    Is that first link, the only one I applied the class to the link

    Flight Tracker at FlightStats.com

    Why is it taking all of the attributes from my new style of .subheadings but not the color?? I don’t get it?

    Any help appreciated!

    raindance

    #17234

    I see, I had to add a. before the name of the style in the style sheet.

    So my question remains: How can I see this style for example in the wordpress dashboard when I edit/build a page to apply as I would the headings or whatnot in the format dropdown? I want to be able to apply for example the class “subheadinglinks” to a link in visual page editor. Can this be done? Can it read styles from the style sheets?

    raindance

    #17235

    Got it:

    Installed WP Super Edit and the associated WP Super Edit Theme Classes plugin.

    Then you have to go to settings on the left of the WP dashboard > WP Super Edit > Configure Editor Plugins > check the box for Advanced CSS / styles Plugin then go to the Arrange Editor Buttons link at the top and drag the Custom Classes button onto the left side toolbars somewhere.

    Then go the file in the theme folder editor-styles > and add whatever styles you want to show up in the drop down for styles to apply using the visual editor.

    Might be a much better way but this is what I came up with and so far seems to work well.

    Mod

    Kenneth John Odle

    #17236

    You can always use your functions file to create a short code to apply the styles. See this post for more info: https://forum.graphene-theme.com/feature-requests/font-size-short-code

    Ken

    raindance

    #17237

    Cool, thanks!

Viewing 6 posts - 1 through 6 (of 6 total)

  • You must be logged in to reply to this topic.