R Shiny editing header - css

I am attempting to edit the header of my shiny application to include 3 items.
The title (on left)
The sidebar menu (burger menu) next to title
A company logo (on right)
I have followed some other posts and attempted to replicate their methods:
Adding a company Logo to ShinyDashboard header
Add text on right of shinydashboard header
How to add a company Logo to ShinyDashboard header (Not mainPanel or mainHeader)
Unfortunately I cannot manage to replicate their solutions. I have managed to add the logo to the right side using the following:
header = dashboardHeader(title = div(dashboard_title, style="text-align: left;"))
header$children[[3]]$children <- tags$img(src=logo_path, align="right", height='50px')
But this removes the burger menu, which I need to retain. I could add the logo instead of the title (as described in one of the links above), but I need to have both items.
I am fairly new to css etc, and so it is entirely possible that the answer is in one of the above links but I was unable to modify it correctly.
Any and all help is appreciated. Thank you.

After trying a fair few things and not getting anywhere I realised that the fix is actually very simple:
header$children[[3]]$children[[3]] <- div(tags$img(src=logo_path, align="right", height='50px'))
There are 3 children of the third children in header. The piece of code in the question was replacing all three with the logo. However, the solution only replaces the last bit of the header with the logo, retaining the burger menu.

Related

Xaringan: Extra character in panel

New to Xaringan and StackOverflow. Had a hard time figuring out how to create tabs (panels) on slides given the info available in the instructions. But, I have it working. However, there is a ] below the title on every Panel slide. Why? This seems to be causing my text to go off the bottom of the slide. I think if I could remove it, then the slides would shift upwards and there would be enough space for my content to fit on the slide.
I have tried removing various ] brackets, but depending on which one I remove, it either removes panels and overlaps all of the content on one slide with the tables and graphs or it deletes the panel and all the content from the panel.
At first, I was unable to make more than one slides with panels. The first slide worked perfectly fine and did not have the random ] at the top of it. But the second slide would not create panels. It just threw all of the content overlapping on one slide. I was able to create two slides with panels when I found
div solution
here
, but that is when the issue with the ] started appearing. The ] is not part of the content.
In reality, there are 4 tabs per slide in roughly the following format:
Tab 1: content and image
Tab 2: R code reactable table
Tab 3: conent and imate
Tab 4: R code ggplot2 plotly interactive graph
I expect one slide with 4 tabs that can be clicked on, but without the extra space or extra characters between the title and the tabs.
EDIT
I put my code here, but someone changed it and it no longer reflected what I had written. I deleted it because it was no longer my code. I also found something in the source code. There is clearly a ] in the source code. How do I find that file and remove it from the source code?

WooCommerce Storefront - How To Customise The Product Catalogue And Reduce White Space?

I've recently been trying to enable a product filter in the left sidebar of my Woocommerce theme. In doing so I've found that the layout displays in a sub-optimal way.
This image illustrates the changes I'm trying to make.
There is a lot of space to the left of the sidebar, I'm trying to get the sidebar to hug the left hand side of the browser window. There is also white space to the right hand side of the product catalogue. Again I'd like the catalogue to fill the space right up to the right hand side of the browser window.
I'd like to shift the "Clothing" header and the content below it up the page so that it sits in line with or just below the "Home>Clothing navigation".
I've been inspecting the code on the page and trying to make amendments to the CSS but I am having no luck so far.
Try this code in your active theme function.php
add_action('wp_footer', 'full_width_override');
function full_width_override(){
echo '<style>.col-full{max-width:80% !important;}</style>';
}

Ionic Platform custom midle tab

So i having problem to customise in bottom tabs the middle, i want to make middle tab height bigger then other tabs, so i cant find the way to customise it. It would be nice if there would be somebody that can help with this.
Link for editing link. And wanted result image.
Tried separately change the hight but, there are a feeling that flex box doesn't allow to tab go out of content.
Inherit the CSS class that holds the icon in the middle and add your custom properties.

Bootstrap 3 fixed size template

I want to create fixed szie page, without common scrollbar. Scrollbars have only two div's, where content content goes beyond of div (contend data and sidebar listing area) as on picture. I alreay did it without bs3, and use javascript (for calculate new offsets on page resize).
http://i.imgur.com/4kesDk7.jpg
Today I tried to create fixed size template with Bootrstrap3, but i can't do it. It's possible to do using bs3? Anybody can show how it is done?
I tried modify this code http://www.bootply.com/0FG70wcT3B. I do left and right headers.

Text Adjustment in Css Dropdown Menu

I need your help once again, guys i'm struggling with a css dropdown menu in which i want to make text alignment top vertically, you can visit the link here:
http://www.kidsartvalley.com
Here that dropdown menus/lists can be viewed under the icons of messages/inbox, friends and notifications at the right side of boy(cartoon). Kindly make it possible for me to show text right on the top of each row's box so that image and text will be equally aligned.
Add float:left to your images inside these boxes. This will result in:
#### Name commented on
#### your awesome job
####
Rather than the current situation:
####
####
#### Name commented on
your awesome job

Resources