do the tip more obvious and change here to this page

program/shinyApp/helpfiles/DataSelection_DataUploadFileInput.md

@@ -1,10 +1,14 @@
 ### Data Upload via File Input
 
 ***
-💡 **Tip**: For more detailed information, please visit <a href="https://icb-dcm.github.io/cOmicsArt/interface-details/01-required-data-input.html" target="_blank">here</a>.
+<div style="border: 2px solid #ffcf30; background-color: #fff0bf; padding: 10px; border-radius: 8px; font-size: 15px;">
+<span style="font-size: 20px;">💡</span>  <strong>Tip:</strong> For more detailed information, please visit 
+<a href="https://icb-dcm.github.io/cOmicsArt/interface-details/01-required-data-input.html" target="_blank" style="font-weight: bold;">this page</a>.
+</div>
+<br>
 
 With `Data upload` you can upload your data to the server via explicit csv files.<br>
-The files must be in the following format:<br>
+<strong>The files must be in the following format:</strong><br>
 1. data-matrix (.csv) <br>
   - contains the actual data, e.g. counts<br>
   - must have the samples (e.g. mouse 1) in the columns and a **unique** naming as 
@@ -22,7 +26,7 @@ The files must be in the following format:<br>
 
 Need help to prepare your data? Check out our Excel Workbook: <a href="https://github.com/ICB-DCM/cOmicsArt/blob/main/UploadHelpcOmicsArt.xlsx" target="_blank">UploadeHelpcOmicsArt.xlsx</a>.
 
-Some pitfalls you may fall into:
+<strong>Some pitfalls you may fall into:</strong>
 * The files must be uploaded at their respective position (**data matrix, 
   sample annotation, entities annotation**).
 * The files need to be **.csv** files, which also means that they need to be comma 

program/shinyApp/helpfiles/DataSelection_MetaData.md

@@ -1,7 +1,11 @@
 ### Data Upload via File Input + Meta Data Sheet
 
 ***
-💡 **Tip**: For more detailed information, please visit <a href="https://icb-dcm.github.io/cOmicsArt/interface-details/01-required-data-input.html#starting-with-a-single-table-and-a-metadatasheet-" target="_blank">here</a>.
+<div style="border: 2px solid #ffcf30; background-color: #fff0bf; padding: 10px; border-radius: 8px; font-size: 15px;">
+<span style="font-size: 20px;">💡</span>  <strong>Tip:</strong> For more detailed information, please visit 
+<a href="https://icb-dcm.github.io/cOmicsArt/interface-details/01-required-data-input.html#starting-with-a-single-table-and-a-metadatasheet-" target="_blank" style="font-weight: bold;">this page</a>.
+</div>
+<br>
 
 With `Data upload` you can upload your data to the server via explicit csv files.<br>
 The files must be in the following format:<br>

program/shinyApp/helpfiles/DataSelection_RowSelection.md

@@ -1,7 +1,11 @@
 ### Data Selection by Columns and Rows
 
 ***
-💡 **Tip**: For more detailed information, please visit <a href="https://icb-dcm.github.io/cOmicsArt/interface-details/02-selection.html#row-selection---biochemical-entities" target="_blank">here</a>.
+<div style="border: 2px solid #ffcf30; background-color: #fff0bf; padding: 10px; border-radius: 8px; font-size: 15px;">
+<span style="font-size: 20px;">💡</span>  <strong>Tip:</strong> For more detailed information, please visit 
+<a href="https://icb-dcm.github.io/cOmicsArt/interface-details/02-selection.html#row-selection---biochemical-entities" target="_blank" style="font-weight: bold;">this page</a>.
+</div>
+<br>
 
 With `Row selection` you can choose the entities (e.g. genes) you want to include in the 
 analysis.

program/shinyApp/helpfiles/DataSelection_SummarizedExp.md

@@ -1,7 +1,11 @@
 ### Data Upload via Precompiled Data
 
 ***
-💡 **Tip**: For more detailed information, please visit <a href="https://icb-dcm.github.io/cOmicsArt/interface-details/01-required-data-input.html#starting-with-an-rds-object" target="_blank">here</a>.
+<div style="border: 2px solid #ffcf30; background-color: #fff0bf; padding: 10px; border-radius: 8px; font-size: 15px;">
+<span style="font-size: 20px;">💡</span>  <strong>Tip:</strong> For more detailed information, please visit 
+<a href="https://icb-dcm.github.io/cOmicsArt/interface-details/01-required-data-input.html#starting-with-an-rds-object" target="_blank" style="font-weight: bold;">this page</a>.
+</div>
+<br>
 
 With this option, you can upload previously used data. This allows you to upload 
 everything at once. Additionally, you can upload results from previous analyses. It is 

program/shinyApp/helpfiles/DataSelection_UploadInspection.md

@@ -1,7 +1,11 @@
 ### Data Quality Check - Visual Inspection
 
 ***
-💡 **Tip**: For more detailed information, please visit <a href="https://icb-dcm.github.io/cOmicsArt/interface-details/02-selection.html#file-input-%EF%B8%8F" target="_blank">here</a>.
+<div style="border: 2px solid #ffcf30; background-color: #fff0bf; padding: 10px; border-radius: 8px; font-size: 15px;">
+<span style="font-size: 20px;">💡</span>  <strong>Tip:</strong> For more detailed information, please visit 
+<a href="https://icb-dcm.github.io/cOmicsArt/interface-details/02-selection.html#file-input-%EF%B8%8F" target="_blank" style="font-weight: bold;">this page</a>.
+</div>
+<br>
 
 Using the `Upload visual inspection` tab, you can see the uploaded data and perform a 
 data quality check.

program/shinyApp/helpfiles/EA_Options.md

@@ -1,7 +1,11 @@
 ## Enrichment Analysis Options
 
 ***
-💡 **Tip**: For more detailed information, please visit <a href="https://icb-dcm.github.io/cOmicsArt/interface-details/09-enrichment-analysis.html" target="_blank">here</a>.
+<div style="border: 2px solid #ffcf30; background-color: #fff0bf; padding: 10px; border-radius: 8px; font-size: 15px;">
+<span style="font-size: 20px;">💡</span>  <strong>Tip:</strong> For more detailed information, please visit 
+<a href="https://icb-dcm.github.io/cOmicsArt/interface-details/09-enrichment-analysis.html" target="_blank" style="font-weight: bold;">this page</a>.
+</div>
+<br>
 
 In cOmicsArt you can do either a gene set enrichment analysis or an over-representation analysis. The options for both analyses are described below.
 For more details read here on

program/shinyApp/helpfiles/Heatmap_Aesthetics.md

@@ -1,7 +1,11 @@
 ## Heatmap Aesthetics Options
 
 ---
-💡 **Tip**: For more detailed information, please visit <a href="https://icb-dcm.github.io/cOmicsArt/interface-details/07-heatmap.html#aesthetics-options" target="_blank">here</a>.
+<div style="border: 2px solid #ffcf30; background-color: #fff0bf; padding: 10px; border-radius: 8px; font-size: 15px;">
+<span style="font-size: 20px;">💡</span>  <strong>Tip:</strong> For more detailed information, please visit 
+<a href="https://icb-dcm.github.io/cOmicsArt/interface-details/07-heatmap.html#aesthetics-options" target="_blank" style="font-weight: bold;">this page</a>.
+</div>
+<br>
 
 **1. Choose Variable to Color the Samples After:**
 

program/shinyApp/helpfiles/Heatmap_FurtherOptions.md

@@ -1,7 +1,12 @@
 ## Log Fold Change (LFC) Ordering Options
 
 ***
-💡 **Tip**: For more detailed information, please visit <a href="https://icb-dcm.github.io/cOmicsArt/interface-details/07-heatmap.html#conditional-options-for-top-k" target="_blank">here</a>.
+<div style="border: 2px solid #ffcf30; background-color: #fff0bf; padding: 10px; border-radius: 8px; font-size: 15px;">
+<span style="font-size: 20px;">💡</span>  <strong>Tip:</strong> For more detailed information, please visit 
+<a href="https://icb-dcm.github.io/cOmicsArt/interface-details/07-heatmap.html#conditional-options-for-top-k" target="_blank" style="font-weight: bold;">this page</a>.
+</div>
+<br>
+
 
 **1. Choose Type for LFC-Based Ordering:**
 

program/shinyApp/helpfiles/Heatmap_Options.md

@@ -1,7 +1,11 @@
 ## Row Selection Options
 
 ***
-💡 **Tip**: For more detailed information, please visit <a href="https://icb-dcm.github.io/cOmicsArt/interface-details/07-heatmap.html#side-panel-" target="_blank">here</a>.
+<div style="border: 2px solid #ffcf30; background-color: #fff0bf; padding: 10px; border-radius: 8px; font-size: 15px;">
+<span style="font-size: 20px;">💡</span>  <strong>Tip:</strong> For more detailed information, please visit 
+<a href="https://icb-dcm.github.io/cOmicsArt/interface-details/07-heatmap.html#side-panel-" target="_blank" style="font-weight: bold;">this page</a>.
+</div>
+<br>
 
 1. **Batch Correction**: Use batch-corrected data if available (set in Pre-processing).
 

program/shinyApp/helpfiles/Heatmap_RowAnnoBased.md

@@ -1,7 +1,11 @@
 ## Additional Row Selection Options
 
 ---
-💡 **Tip**: For more detailed information, please visit <a href="https://icb-dcm.github.io/cOmicsArt/interface-details/07-heatmap.html#conditional-options-for-select-based-on-annotation" target="_blank">here</a>.
+<div style="border: 2px solid #ffcf30; background-color: #fff0bf; padding: 10px; border-radius: 8px; font-size: 15px;">
+<span style="font-size: 20px;">💡</span>  <strong>Tip:</strong> For more detailed information, please visit 
+<a href="https://icb-dcm.github.io/cOmicsArt/interface-details/07-heatmap.html#conditional-options-for-select-based-on-annotation" target="_blank" style="font-weight: bold;">this page</a>.
+</div>
+<br>
 
 These options only make sense if you selected `rowAnno_based` in the `Row Selection`. 
 They serve to filter the row entities which to include in the heatmap.

program/shinyApp/helpfiles/PCA_Choices.md

@@ -1,7 +1,11 @@
 ## Principal Component Analysis (PCA) Options
 
 ***
-💡 **Tip**: For more detailed information, please visit <a href="https://icb-dcm.github.io/cOmicsArt/interface-details/06-pca.html#side-panel-" target="_blank">here</a>.
+<div style="border: 2px solid #ffcf30; background-color: #fff0bf; padding: 10px; border-radius: 8px; font-size: 15px;">
+<span style="font-size: 20px;">💡</span>  <strong>Tip:</strong> For more detailed information, please visit 
+<a href="https://icb-dcm.github.io/cOmicsArt/interface-details/06-pca.html#side-panel-" target="_blank" style="font-weight: bold;">this page</a>.
+</div>
+<br>
 
 A principal component analysis (PCA) is a linear dimensionality reduction technique to 
 visualize clusters within your data. For a small introduction on PCAs, please refer to 

program/shinyApp/helpfiles/PreProcessing_Batch.md

@@ -1,6 +1,10 @@
 ## Batch Correction
 ***  
-💡 **Tip**: For detailed information, visit <a href="https://icb-dcm.github.io/cOmicsArt/interface-details/03-pre-processing.html#select-batch-effect-column" target="_blank">this link</a>.
+<div style="border: 2px solid #ffcf30; background-color: #fff0bf; padding: 10px; border-radius: 8px; font-size: 15px;">
+<span style="font-size: 20px;">💡</span>  <strong>Tip:</strong> For more detailed information, please visit 
+<a href="https://icb-dcm.github.io/cOmicsArt/interface-details/03-pre-processing.html#select-batch-effect-column" target="_blank" style="font-weight: bold;">this page</a>.
+</div>
+<br>
 
 ### Key Considerations:
 Batch correction can be performed during pre-processing if the batch information is already included in your sample annotation. When using DESeq processing, the batch-corrected data will be utilized for visualization purposes. However, for significance analysis, the batch will be treated as a factor.

program/shinyApp/helpfiles/PreProcessing_DESeq.md

@@ -1,7 +1,11 @@
 ## DESeq Factor Choices
 
 ***
-💡 **Tip**: For more detailed information, please visit <a href="https://icb-dcm.github.io/cOmicsArt/interface-details/03-pre-processing.html" target="_blank">here</a>.
+<div style="border: 2px solid #ffcf30; background-color: #fff0bf; padding: 10px; border-radius: 8px; font-size: 15px;">
+<span style="font-size: 20px;">💡</span>  <strong>Tip:</strong> For more detailed information, please visit 
+<a href="https://icb-dcm.github.io/cOmicsArt/interface-details/03-pre-processing.html" target="_blank" style="font-weight: bold;">this page</a>.
+</div>
+<br>
 
 ### Understanding the Design Matrix in DESeq2
 

program/shinyApp/helpfiles/PreProcessing_Procedures.md

@@ -1,6 +1,10 @@
 ## Data Preprocessing
 ***  
-💡 **Tip**: For detailed information, visit <a href="https://icb-dcm.github.io/cOmicsArt/interface-details/03-pre-processing.html" target="_blank">this link</a>.
+<div style="border: 2px solid #ffcf30; background-color: #fff0bf; padding: 10px; border-radius: 8px; font-size: 15px;">
+<span style="font-size: 20px;">💡</span>  <strong>Tip:</strong> For more detailed information, please visit 
+<a href="https://icb-dcm.github.io/cOmicsArt/interface-details/03-pre-processing.html" target="_blank" style="font-weight: bold;">this page</a>.
+</div>
+<br>
 
 ### Key Steps:
 1. **Cleaning:**  

program/shinyApp/helpfiles/SampleCorr_Choices.md

@@ -1,7 +1,10 @@
 ## Correlation Method  
 ***  
-💡 **Tip**: For details, visit <a href="https://icb-dcm.github.io/cOmicsArt/interface-details/04-sample-correlation.html" target="_blank">this link</a>.  
-
+<div style="border: 2px solid #ffcf30; background-color: #fff0bf; padding: 10px; border-radius: 8px; font-size: 15px;">
+<span style="font-size: 20px;">💡</span>  <strong>Tip:</strong> For more detailed information, please visit 
+<a href="https://icb-dcm.github.io/cOmicsArt/interface-details/04-sample-correlation.html" target="_blank" style="font-weight: bold;">this page</a>.
+</div>
+<br>
 ### Methods:  
 
 1. **Pearson:**  

program/shinyApp/helpfiles/SampleCorr_Color.md

@@ -1,7 +1,11 @@
 ## Color Annotation
 
 ***
-💡 **Tip**: For more detailed information, please visit <a href="https://icb-dcm.github.io/cOmicsArt/interface-details/04-sample-correlation.html" target="_blank">here</a>.
+<div style="border: 2px solid #ffcf30; background-color: #fff0bf; padding: 10px; border-radius: 8px; font-size: 15px;">
+<span style="font-size: 20px;">💡</span>  <strong>Tip:</strong> For more detailed information, please visit 
+<a href="https://icb-dcm.github.io/cOmicsArt/interface-details/04-sample-correlation.html" target="_blank" style="font-weight: bold;">this page</a>.
+</div>
+<br>
 
 You can choose **Multiple** options. Each option is a column from the `sample 
 annotation table`. The clustered samples will be colored on the right side by your 

program/shinyApp/helpfiles/SampleCorr_Downloads.md

@@ -1,7 +1,11 @@
 ## Download Helper
 
 ***
-💡 **Tip**: For more detailed information, please visit <a href="https://icb-dcm.github.io/cOmicsArt/interface-details.html#features-across-tabs" target="_blank">here</a>.
+<div style="border: 2px solid #ffcf30; background-color: #fff0bf; padding: 10px; border-radius: 8px; font-size: 15px;">
+<span style="font-size: 20px;">💡</span>  <strong>Tip:</strong> For more detailed information, please visit 
+<a href="https://icb-dcm.github.io/cOmicsArt/interface-details.html#features-across-tabs" target="_blank" style="font-weight: bold;">this page</a>.
+</div>
+<br>
 
 These buttons serve for various downloading purposes.
 

program/shinyApp/helpfiles/SigAna_Choices.md

@@ -1,6 +1,9 @@
 ## Significance Analysis Options
-
-💡 **Tip**: For more details, visit <a href="https://icb-dcm.github.io/cOmicsArt/interface-details/05-significance-analysis.html#main-panel-" target="_blank">here</a>.
+<div style="border: 2px solid #ffcf30; background-color: #fff0bf; padding: 10px; border-radius: 8px; font-size: 15px;">
+<span style="font-size: 20px;">💡</span>  <strong>Tip:</strong> For more detailed information, please visit 
+<a href="https://icb-dcm.github.io/cOmicsArt/interface-details/05-significance-analysis.html#main-panel-" target="_blank" style="font-weight: bold;">this page</a>.
+</div>
+<br>
 
 1. **Groups to Compare**  
    - Select groups for significance analysis based on predefined factors (for DESeq) or sample annotations.

program/shinyApp/helpfiles/SigAna_Intersections.md

@@ -1,7 +1,11 @@
 ## Highlight and Download intersections
 
 ***
-💡 **Tip**: For more detailed information, please visit <a href="https://icb-dcm.github.io/cOmicsArt/interface-details/05-significance-analysis.html#main-panel-" target="_blank">here</a>.
+<div style="border: 2px solid #ffcf30; background-color: #fff0bf; padding: 10px; border-radius: 8px; font-size: 15px;">
+<span style="font-size: 20px;">💡</span>  <strong>Tip:</strong> For more detailed information, please visit 
+<a href="https://icb-dcm.github.io/cOmicsArt/interface-details/05-significance-analysis.html#main-panel-" target="_blank" style="font-weight: bold;">this page</a>.
+</div>
+<br>
 
 To allow for a better overview of the intersections, the user can highlight the 
 intersections of interest. You can choose from all available intersections in the 

program/shinyApp/helpfiles/SigAna_Vis.md

@@ -1,7 +1,12 @@
 ## Visualizing Significance Analysis Results Options
 
 ***
-💡 **Tip**: For more detailed information, please visit <a href="https://icb-dcm.github.io/cOmicsArt/interface-details/05-significance-analysis.html#main-panel-" target="_blank">here</a>.
+<div style="border: 2px solid #ffcf30; background-color: #fff0bf; padding: 10px; border-radius: 8px; font-size: 15px;">
+<span style="font-size: 20px;">💡</span>  <strong>Tip:</strong> For more detailed information, please visit 
+<a href="https://icb-dcm.github.io/cOmicsArt/interface-details/05-significance-analysis.html#main-panel-" target="_blank" style="font-weight: bold;">this page</a>.
+</div>
+<br>
+
 
 **1. Select Comparisons to Visualize:**
 

program/shinyApp/helpfiles/SingleGene_Options.md

@@ -1,7 +1,11 @@
 ## Single Gene Visualization Options
 
 ---
-💡 **Tip**: For more detailed information, please visit <a href="https://icb-dcm.github.io/cOmicsArt/interface-details/08-single-gene-visualisations.html#side-panel-" target="_blank">here</a>.
+<div style="border: 2px solid #ffcf30; background-color: #fff0bf; padding: 10px; border-radius: 8px; font-size: 15px;">
+<span style="font-size: 20px;">💡</span>  <strong>Tip:</strong> For more detailed information, please visit 
+<a href="https://icb-dcm.github.io/cOmicsArt/interface-details/08-single-gene-visualisations.html#side-panel-" target="_blank" style="font-weight: bold;">this page</a>.
+</div>
+<br>
 
 **1. Choose Data Type:**
 

program/shinyApp/helpfiles/SingleGene_Select.md

@@ -1,7 +1,11 @@
 ## Choosing groups for comparison
 
 ---
-💡 **Tip**: For more detailed information, please visit <a href="https://icb-dcm.github.io/cOmicsArt/interface-details/08-single-gene-visualisations.html#side-panel-" target="_blank">here</a>.
+<div style="border: 2px solid #ffcf30; background-color: #fff0bf; padding: 10px; border-radius: 8px; font-size: 15px;">
+<span style="font-size: 20px;">💡</span>  <strong>Tip:</strong> For more detailed information, please visit 
+<a href="https://icb-dcm.github.io/cOmicsArt/interface-details/08-single-gene-visualisations.html#side-panel-" target="_blank" style="font-weight: bold;">this page</a>.
+</div>
+<br>
 
 This option lets you specify how to group the samples based on the annotation categories 
 provided in the sample annotation file. This only has an effect if you have chosen 

program/shinyApp/helpfiles/TakingNotesMD_help.md

@@ -1,7 +1,11 @@
 ## Personal Note Taking
 
 ***
-💡 **Tip**: For more detailed information, please visit <a href="https://icb-dcm.github.io/cOmicsArt/interface-details.html#features-across-tabs" target="_blank">here</a>.
+<div style="border: 2px solid #ffcf30; background-color: #fff0bf; padding: 10px; border-radius: 8px; font-size: 15px;">
+<span style="font-size: 20px;">💡</span>  <strong>Tip:</strong> For more detailed information, please visit 
+<a href="https://icb-dcm.github.io/cOmicsArt/interface-details.html#features-across-tabs" target="_blank" style="font-weight: bold;">this page</a>.
+</div>
+<br>
 
 This Section is here for your Notes. It can be as easy as just a keyword or as complex as an entire figure description or even an entire book (however I do think there are better tools for this).
 To enable possibilities to structure your text, involving headings, bullets points or colored chunks `markdown` syntax can be used. 

program/shinyApp/helpfiles/helpTab_question.md

@@ -1,6 +1,10 @@
 ## Congrats!
 ***
-💡 **Tip**: If you click <a href="https://icb-dcm.github.io/cOmicsArt/" target="_blank">here</a> you will be directed to the correct location within the documentation. Note: Here is the beginning of the documentation.
+<div style="border: 2px solid #ffcf30; background-color: #fff0bf; padding: 10px; border-radius: 8px; font-size: 15px;">
+<span style="font-size: 20px;">💡</span>  <strong>Tip:</strong>  If you click 
+<a href="https://icb-dcm.github.io/cOmicsArt/" target="_blank" style="font-weight: bold;">this page</a>.you will be directed to the correct location within the documentation. Note: Here is the beginning of the documentation.
+</div>
+<br>
 
 You found your first question mark. Watch out for these to get immediate help on the
 particular topic the question mark is attached to. They often also direct you to further